基于jQuery的自定义Video视频播放组件（兼容IE6~8）

最新推荐文章于 2024-07-26 03:33:51 发布

zh_rey

最新推荐文章于 2024-07-26 03:33:51 发布

阅读量4.3k

点赞数 2

分类专栏： JavaScript 文章标签： video object 视频 jQuery embed

本文为博主原创文章，如需转载请在评论区留言说明。

本文链接：https://blog.csdn.net/zh_rey/article/details/80812931

版权

JavaScript 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

demo下载链接

之前用过video.js插件写过视频组件，但是自己一般仅仅是播放个视频，里面有好多功能用不到，改着不太方便，于是就自己用jQuery封装了一个插件，控制器之类的样式是可以自定义的，支持中英文切换，废话不多说，下面上图。

高版本浏览器video样式

注：如果遇到进度条不能拖动的情况，不是兼容性问题，是webkit内核的浏览器在本地播放视频设置video播放时间(video.currentTime)的时候会自动初始化为0，一般放到服务器上是不会出现这个问题的，再具体的话可以网上查一查。

视频编码格式我是用的MP4的AVC(H264)

低版本浏览器使用object和embed （播放器是flvplayer.swf）

（object和embed详细使用方法我之前有篇文章写过点击打开链接）

接下来是代码（demo下载链接）

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Custom HTML5 Video Controls with jQuery</title>
	<link rel="stylesheet" href="video/style.css" />
	<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="video/video.js" type="text/javascript"></script>
</head>
<body>
<div id="videoContainer" class="videoContainer">
	<video loop preload="auto" poster="post.jpg">
	  <source src="ncr-video.mp4" type="video/mp4" />
	  <!--<source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />
	  <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />-->
	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
	    <param name="movie" value="video/flvplayer.swf" />
	    <param name="quality" value="high" />
	    <param name="allowFullScreen" value="true" />
	    <param name="FlashVars" value="vcastr_file=../ncr-video.mp4&LogoText=description&BufferTime=3&IsAutoPlay=1">
	    <embed src="video/flvplayer.swf" allowfullscreen="true" flashvars="vcastr_file=../ncr-video.mp4&IsAutoPlay=1&LogoUrl=post.jpg" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
		</object>
	</video>
</div>
<script>
	window.videoControl({
		id:'#videoContainer', // 容器id
		autoplay:false, // 是否自动播放
		lang:'zh', // 语言 默认英文
		title:'This is HTML5 video with custom controls', // 标题
		options:{ // 控件
			speed:true, // 速度控件
			sound:true, // 声音控件
			light:false, // 开关灯控件
			full:true // 全屏控件
		}
	});
</script>
</body>
</html>

具体插件代码和demo请点击下载