videojs兼容用法

最新推荐文章于 2023-01-17 16:48:36 发布

hangGe0111

最新推荐文章于 2023-01-17 16:48:36 发布

阅读量5.5k

点赞数 1

分类专栏：轮子文章标签： videojs 兼容

本文链接：https://blog.csdn.net/hangGe0111/article/details/80883452

版权

轮子专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

hangGe0111

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
videojs兼容用法

1.头部文件 &lt;head&gt; &lt;title&gt;Video.js | HTML5 Video Player&lt;/title&gt; &lt;!--兼容低版本浏览器的H5插件--&gt; &lt;script src="http://api.html5media.info/1.1.4/html5media.min.js"&gt;&lt;/script&g
复制链接

扫一扫