获取video.js
获取 video.js (注意不是videojs) 的方法有很多,这里我们以CDN为例,说明如何获取video.js。更多获取video.js的方法,请查看下一章教程安装。
CND
在 jsdelivr 和 bootcdn 上都可以找到video.js的cdn,我们以jsdelivr为例。
需要引入的js和css如下:
https://unpkg.com/video.js@7.10.2/dist/video-js.min.css
https://unpkg.com/video.js@7.10.2/dist/video.min.js
引入video.js
最简单的使用video.js的方式是创建一个video标签,并且包含data-setup属性。data-setup属性可以包含video.js的各种配置。如果什么都不需要,可以传一个空对象”{}”
<video
id="my-player"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="http://vjs.zencdn.net/v/oceans.png"
data-setup="{}"
>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<p class="vjs-no-js">
如果想使用video.js,请确保浏览器可以运行JavaScript,并且支持
<a href="https://videojs.com/html5-video-support/" target="_blank"
>HTML5 video</a>
</p>
</video>
页面加载完成后,video.js会找到该video标签,然后启动一个播放器。
完整代码如下:
<head>
<link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />
<!-- 如果要支持IE8,请使用v7之前的video.js,并且引入下面这个js链接。-->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-player"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="http://vjs.zencdn.net/v/oceans.png"
data-setup="{}"
>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<p class="vjs-no-js">
如果想使用video.js,请确保浏览器可以运行JavaScript,并且支持
<a href="https://videojs.com/html5-video-support/" target="_blank"
>HTML5 video</a>
</p>
</video>
<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
</body>
效果
js启动
如果不想自动启动播放器,可以移除video标签上的data-setup属性,然后使用js代码启动。
let player = videojs('my-player');
调用videojs函数的时候,也可以传options配置对象和callback回调函数作为参数。
let options = {};
let player = videojs('my-player', options, function onPlayerReady() {
videojs.log('播放器准备好了!');
// In this context, `this` is the player that was created by Video.js.
this.play();
this.on('ended', function() {
videojs.log('播放结束!');
});
});
完整代码
<html>
<head>
<link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />
<!-- 如果要支持IE8,请使用v7之前的video.js,并且引入下面这个js链接。-->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-player"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="http://vjs.zencdn.net/v/oceans.png"
>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<p class="vjs-no-js">
如果想使用video.js,请确保浏览器可以运行JavaScript,并且支持
<a href="https://videojs.com/html5-video-support/" target="_blank"
>HTML5 video</a>
</p>
</video>
<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
<script>
let options = {};
let player = videojs('my-player', options, function onPlayerReady() {
videojs.log('播放器准备好了!');
// In this context, `this` is the player that was created by Video.js.
this.play();
this.on('ended', function() {
videojs.log('播放结束!');
});
});
</script>
</body>
</html>
JS启动效果
更多的内容,请查看其他相关教程