videojs兼容用法

程序员文章站 2022-07-08 18:30:16

...

1.头部文件

<head>
	<title>Video.js | HTML5 Video Player</title>
	<!--兼容低版本浏览器的H5插件-->
	<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
	<!--videjs样式部分-->
	<link href="http://vjs.zencdn.net/6.10/video-js.min.css" rel="stylesheet">
	<!--videjs的js部分-->
	<script src="http://vjs.zencdn.net/6.10/video.min.js"></script>
	<!--播放按钮居中显示-->
	<style type="text/css">
	.video-js .vjs-big-play-button{
		left: 50%;
		margin-left: -1.5em;
		top: 50%;
		margin-top: -0.75em;
	}
	</style>	
</head>

2.body里的文件

<!--video进行宽高width、height和控制controls和默认图片poster和data-setup(必须)的初始设置-->
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"  poster="http://vjs.zencdn.net/v/oceans.png"  data-setup="{}">
	<!--引入视屏的三种格式(video播放对视屏格式有要求)-->
	<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
	<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
	<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
	<p class="vjs-no-js">
		To view this video please enable JavaScript, and consider upgrading to a web browser that
		<a href="http://videojs.com/html5-video-support/" target="_blank">
			supports HTML5 video
		</a>
	</p>
</video>

3.效果

(1)Google

videojs兼容用法