这个在使用jw_player的时候的随笔。现在写下方便以后用到进行查看。
我这里做的是一个播放器的一个弹窗,现在直接把所有的代码全部贴出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jwplayer.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.tan_video{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 9999px;
background: #000;
opacity: 0.5;
filter: alpha(opacity = 50);
}
.video{
display: none;
height: 374px;
width: 654px;
position: fixed;
left: 50%;
margin-left: -327px;
top: 30%;
border: 7px solid #fff;
border-radius: 10px;
border-color:rgba(255,255,255,0.3) ;
background: #fff;
background-clip: content-box;
}
.close{
cursor: pointer;
width: 53px;
height: 53px;
position: absolute;
right: -25px;
top: -25px;
z-index: 3;
}
.clazz_list{
height: 80px;
width: 80px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="clazz_list">
弹窗播放器
</div>
<div class="tan_video">
</div>
<div class="video">
<img class="close" src="close.png"/>
<div id="jw_player"></div>
</div>
</body>
<script type="text/javascript">
$('.clazz_list').on('click',function(){
$('.tan_video').css('display','block')
$('.video').css('display','block')
//调用播放器
var myid=2678;
poster = 'test.jpg';
jwplayer("jw_player").setup({
file:'http://source.vickeynce.com/2016072296773d2ae6f388d5f68f4f01827b9c19.mp4',
image: poster,
primary: 'flash',
flashplayer: 'jwplayer.flash.swf',
html5player: 'jwplayer.html5.js',
width:654,
height:374,
startparam:true
});
})
$('.close').on('click',function(){
$('.tan_video').css('display','none')
$('.video').css('display','none')
})
</script>
</html>
上传了一个jw_player 6.6,并且附带上了这个弹窗播放器。
http://download.csdn.net/detail/seven0404/9652054