jw_player的使用方法

最新推荐文章于 2024-04-24 09:59:30 发布

pliangwei

最新推荐文章于 2024-04-24 09:59:30 发布

阅读量3.5k

点赞数

分类专栏：调试工具使用文章标签：前端开发调试

本文链接：https://blog.csdn.net/seven0404/article/details/52799243

版权

调试同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

工具使用

4 篇文章 0 订阅

订阅专栏

这个在使用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

pliangwei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jw_player的使用方法

这个在使用jw_player的时候的随笔。现在写下方便以后用到进行查看。我这里做的是一个播放器的一个弹窗，现在直接把所有的代码全部贴出来 .tan_video{ display: none; position: absolute; left: 0; top: 0; width: 100%; heigh
复制链接

扫一扫