videojs兼容用法

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

    

    (2) Firefox 

        

    (3)360极速

    

(4)360里的兼容模式

    ①IE7  ,IE8      

        ②IE9


        ③IE10   

4.几点说明

        (1)video是H5新标签,若想在低版本浏览器中使用必须对标签兼容处理html5media.min.js;
        (2)官方地址:http://videojs.com
        (3)推荐博客:https://www.cnblogs.com/afrog/p/6689179.html

展开阅读全文

没有更多推荐了,返回首页