欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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兼容用法

    (2) Firefox 

        videojs兼容用法

    (3)360极速

    videojs兼容用法

(4)360里的兼容模式

    ①IE7  ,IE8      videojs兼容用法

        ②IE9

videojs兼容用法

        ③IE10   videojs兼容用法

4.几点说明

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

相关标签: videojs 兼容