这是一款开箱即用的 Web 视频播放器,它支持 HTML5 视频和流媒体格式,至今有超过 45 万个网站在使用它。重要的是它开源,并且仍在更新。
GitHub项目地址:https://github.com/videojs/video.js
使用文档:https://videojs.com/getting-started
简单使用
在HTML中引入播放器的样式文件和js文件即可
<link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet"><script src="//vjs.zencdn.net/8.3.0/video.min.js"></script><link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/8.3.0/video.min.js"></script><link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>
接下来,使用 Video.js
就像创建一个<video>
元素一样简单,但需要添加一个data-setup
属性。此属性至少必须具有一个值'{}'
,但它可以包含任何 Video.js
选项- 只需确保它包含有效的 JSON 即可!
<videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"data-setup='{}'><source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source><source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source><source src="//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 aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video><video id="my-player" class="video-js" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" data-setup='{}'> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source> <source src="//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="https://videojs.com/html5-video-support/" target="_blank"> supports HTML5 video </a> </p> </video><video id="my-player" class="video-js" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" data-setup='{}'> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source> <source src="//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="https://videojs.com/html5-video-support/" target="_blank"> supports HTML5 video </a> </p> </video>
当页面加载时,Video.js
将找到该元素并自动在其位置设置播放器。
如果您不想使用自动设置,您可以省略属性并使用以下函数手动data-setup
初始化元素:<video>
videojs
var player = videojs('my-player');var player = videojs('my-player');var player = videojs('my-player');
该videojs
函数还接受一个options
对象和一个回调,当播放器准备好时调用:
var options = {};var player = videojs('my-player', options, function onPlayerReady() {videojs.log('Your player is ready!');// In this context, `this` is the player that was created by Video.js.this.play();// How about an event listener?this.on('ended', function() {videojs.log('Awww...over so soon?!');});});var options = {}; var player = videojs('my-player', options, function onPlayerReady() { videojs.log('Your player is ready!'); // In this context, `this` is the player that was created by Video.js. this.play(); // How about an event listener? this.on('ended', function() { videojs.log('Awww...over so soon?!'); }); });var options = {}; var player = videojs('my-player', options, function onPlayerReady() { videojs.log('Your player is ready!'); // In this context, `this` is the player that was created by Video.js. this.play(); // How about an event listener? this.on('ended', function() { videojs.log('Awww...over so soon?!'); }); });
感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
暂无评论内容