项目名字
Video.js
在线示例
源码好不好，一看就知道
使用
方法一
在 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('播放结束!');
});
});获取Video.js
结语
祝大家安装成功
2024-11-16 14:14:03 星期六
评论 (0)