您好,登录后才能下订单哦!
本篇文章为大家展示了如何在video.js中添加一个自定义组件,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
源码的编译
使用cmd,在源代码根目录下使用npm run build命令对源码进行打包.
具体的打包编译方法可以点击这里查看
没有错误正常编译后可以得到dist文件夹,里面有编译后的文件.
开发TitleBar源码
// Subclasses Component import Component from './component.js'; import console from 'global/console'; import videojs from './video.js'; // videojs.extend方法用来实现继承,videojs中大部分组件直接或间接的继承自Component /** * the title bar * @extends Component */ class TitleBar extends Component { // The constructor of a component receives two arguments: the // player it will be associated with and an object of options. // 这个构造函数接收两个参数: // player将被用来关联options中的参数 /** * constructor * @param {Player} player the player * @param {any} options the options */ constructor(player, options) { //调用父类的构造方法 super(player, options); // 如果在options中传了text属性,那么更新这个组件的文字显示 if (options.text) { this.updateTextContent(options.text); } } // The `createEl` function of a component creates its DOM element. // 创建一个DOM元素 /** * creatEl * @returns {*} zzf add */ createEl() { return super.createEl('div', { // Prefixing classes of elements within a player with "vjs-" // is a convention used in Video.js. // 给元素加vjs-开头的样式名 className: 'vjs-title-bar' }); } /** * 设置标题 * @param {String} text the title */ updateTextContent(text) { // 如果options中没有提供text属性,默认显示为空 if (typeof text !== 'string') { text = ' '; } // Use Video.js utility DOM methods to manipulate the content // of the component's element. // 使用Video.js提供的DOM方法来操作组件元素 videojs.dom.emptyEl(this.el()); videojs.dom.appendContent(this.el(), text); } /** * build css class * @returns {string} the class */ buildCSSClass() { return 'vjs-title-bar'; } /** * when the languagechange */ handleLanguagechange() { } } TitleBar.prototype.controlText_ = 'title-bar'; // Register the component with Component, so it can be used in players. // 在component中注册这个组件,才可以使用 Component.registerComponent('TitleBar', TitleBar); export default TitleBar;
需要注意的是,TitleBar应继承Component,并且在构造方法中应先调用父类的构造方法.
同时,需要调用Component.registerComponent()方法注册组件.
打开player.js文件,在图中的地方import自己的组件即可.videojs初始化时会自动进行注册
在title-bar.js文件中,buildCSSClass方法中声明了titleBar的css样式为vjs-title-bar,故在css样式中末尾添加如下css代码
/** title bar默认样式 */ .video-js .vjs-title-bar { color: white; font-size: 2em; padding: .5em; position: absolute; top: 0; left:10%; min-width: 80px; height: 40px; line-height: 40px; } .vjs-has-started .vjs-title-bar { display: flex; visibility: visible; opacity: 1; transition: visibility 0.1s, opacity 0.1s; } /* 用户不活动时设计title bar自动隐藏 */ .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-title-bar { visibility: visible; /*visibility: hidden;*/ opacity: 0; transition: visibility 1s, opacity 1s; } .vjs-controls-disabled .vjs-title-bar, .vjs-using-native-controls .vjs-title-bar, .vjs-error .vjs-title-bar { display: none !important; } .vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-title-bar { opacity: 0; visibility: visible; /*visibility: hidden;*/ } .vjs-has-started.vjs-no-flex .vjs-title-bar { display: table; }
通过npm打包生成的css样式文件可能存在问题,可以访问http://vjs.zencdn.net/7.11/video-js.css将官方的css文件复制到本地,并在末尾添加自己需要的css样式代码
与之前编译方式一样,在源代码目录下使用npm run build命令进行编译
编写一个简单的html网页进行测试
<!DOCTYPE html> <html lang="en"> <head> <title>Video.js | HTML5 Video Player</title> <!--引用本地样式文件 --> <link href="C:\Users\KKFORKK\Desktop\example\docs\copycss.css" rel="external nofollow" rel="stylesheet"> <!--引用编译后的js文件--> <script src="C:\Users\KKFORKK\Desktop\example\dist\video.min.js"></script> </head> <body> <video id="example_video_1" class="video-js" controls preload="none" width="1024" height="768" poster="D:/pixiv/1605679254116.jpg" > <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/" rel="external nofollow" target="_blank"> supports HTML5 video</a></p> </video> <script> //获取video元素并进行配置 var player = videojs('example_video_1', { inactivityTimeout: 2000, //启用titleBar组件,并设置text TitleBar: { 'text':'000' }, sourcesOrder:true, controls: true, // 是否显示控制条 preload: 'auto', autoplay: false, language: 'zh-CN', // 设置语言 muted: false, // 是否静音 controlBar: { // 设置控制条组件 /* 使用children的形式可以控制每一个控件的位置,以及显示与否 */ children: [ {name: 'playToggle'}, // 播放按钮 {name: 'currentTimeDisplay'}, // 当前已播放时间 {name: 'progressControl'}, // 播放进度条 {name: 'durationDisplay'}, // 总时间 {name: 'audioTrackButton'}, { // 倍数播放 name: 'playbackRateMenuButton', 'playbackRates': [0.5, 1, 1.5, 2, 2.5] }, { name: 'volumePanel', // 音量控制 inline: false, // 不使用水平方式 }, {name: 'FullscreenToggle'} // 全屏 ] }, sources:[ // 视频源,这里选择的是音频 { //资源 src: 'D:/Music/Aimer - DAWN.mp3', type: 'audio/mp3', //资源类型 poster: 'D:/pixiv/1605679254116.jpg', } ] }, function (){ console.log('视频可以播放了',this); }); </script> </body> </html>
上述内容就是如何在video.js中添加一个自定义组件,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。