HTML5 Web播放器 |
您所在的位置:网站首页 › web视频播放器源码是多少位 › HTML5 Web播放器 |
获取Video.js
Video.js支持npm和bower方式安装: NPM $ npm install --save video.jsBower $ bower install --save video.js也可以在页面中直接通过标签引用CDN资源: 当然你也可以下载Video.js到本地,然后引用即可,点击这里下载。 使用Video.js有了 Video.js ,您只需使用一个HTML5 标签嵌入视频即可。 Video.js 接下来会读取标签然后让它在所有浏览器中都可以工作,并非只有支持 HTML5 video 的浏览器。除了基本的标记,Video.js 还需要一些额外的标记。 Video.js支持元素的所有属性(如控件,预加载等),但它也支持它自己的选项。 有两种方法可以创建Video.js播放器并传递选项,但它们都以具有属性class ="video-js"的标准元素开头: 请开启Javascript脚本以便 支持HTML5 video播放器 添加class: vjs-big-play-centered可以将播放按钮居中,否则播放按钮默认是在播放器的左上角。 现在运行页面,就可以看到一个漂亮的播放器,点击播放按钮即可播放影片。 我们可以使用data-setup属性来设置video的一些额外的option选项,通常是JSON格式,如: 如果你不想使用auto-setup,你可以暂时不用设置auto-setup属性,然后手动初始化一个视频元素。 手动js调用播放器首先元素中去掉了auto-setup属性,其他不变。 请开启Javascript脚本以便 支持HTML5 video播放器 然后,使用videojs()方法加载Video,如: videojs("example_video_1", {}, function(){ // Player (this) is initialized and ready. });videojs()方法中,第一个参数是video标签的 ID。 第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。 第三个参数是一个'ready'回调。一旦 Video.js 初始化完成后,就会触发这个回调。 完整的js代码如下: var player = videojs('my-player'); var options = {}; var player = videojs('my-player', options, function onPlayerReady() { videojs.log('Your player is ready!'); this.play(); // 开始播放 // 监听播放结束状态 this.on('ended', function() { videojs.log('Awww...over so soon?!'); }); });更多设置和选项请参考Video.js项目地址:https://github.com/videojs/video.js。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |