视频播放插件Video.js中文使用说明

2021-05-24 0 1,172 百度已收录

因为博客会分享一些视频,而 WordPress 仅支持在文章中插入视频连接,不支持多集视频,自己想要这个功能很长时间了,一直没能实现,最近有时间尝试了一下,后台主要是通过 Post Meta 实现的,前端显示通过 Video.js 在页面中插入的视频, Video.js 会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。这里记录下 Video.js 以备后查。

引入 JS 、CSS 文件

与其他 CSS ,JS 文件引入一样,这里分别通过 link 标签及 script 标签引入 CSS 文件及 JS 文件即可。

  1.     <link href="video-js.min.css" rel="stylesheet" type="text/css">
  2.     <script type="text/javascript" src="video.min.js"></script>

视频播放参数设置

如果对视频页面没有特殊要求的,直接使用 <video> 标签嵌入到需要调用的位置即可:

  1.     <!-- via data-setup -->
  2.     <video id="vid1" class="video-js" data-setup='{}'>
  3.         <source src="//vjs.zencdn.net/v/oceans.mp4">
  4.     </video>
  5.  
  6.     <!-- via code -->
  7.     <video id="vid1" class="video-js">
  8.         <source src="//vjs.zencdn.net/v/oceans.mp4">
  9.     </video>
  10.  
  11.     const player = videojs('vid1', {});

主要分为两种方式,一种是直接在 HTML 中通过 data-setup 属性中定义播放器的各种参数,一种是通过 videojs 方法定义各种参数。其实都差不多,可定义的参数有:

<video> 标签默认参数

  • autoplay :(boolean|string)自动播放,慎用(好多浏览器逐渐停用)。false、true、play、muted、any ;
  • controls :(boolean)是否有控件提供给用户进行视频交互,如果为否则需设置自动播放;
  • height :(string|number)定义视频播放器高度,px ;
  • width :(string|number)定义视频播放器宽度,px ;
  • loop :(boolean)是否自动循环;
  • muted :(boolean)默认视频静音;
  • poster :(string)在视频开始播放之前显示的图像的URL ;
  • preload :(string)视频预加载,auto、metadata、none ;
  • src :(string)嵌入视频源的源URL 。

video.js 增强参数

  • aspectRatio :(string)设置一个计算比率作为流畅模式时的屏幕显示大小;
  • autoSetup :(boolean)阻止播放器为具有data-setup属性的媒体元素运行自动设置;
  • children :(Array|Object)Video.js 是一个组件。您可以定义其包括哪些子项、出现的顺序以及传参;
  • fluid :(boolean)播放器是否可变大小;
  • inactivityTimeout :(number)Video.js通过”vjs-user-active”和”vjs-user-inactive”类以及”useractive”事件指示用户正在与播放器进行交互。inactivityTimeout 设置超时限制时间;
  • language :(string)设置播放器初始语言,默认 en ;
  • languages :(Object)自定义更多播放器可用语言;
  • liveui :(boolean )是否允许播放器使用新的实时用户界面;
  • nativeControlsForTouch :(boolean)显式设置关联技术选项的默认值;
  • notSupportedMessage :(string)设置 Video.js 无法播放媒体源时显示的默认消息;
  • fullscreen :(Object )设置更多全屏时的可用选项,{options: {navigationUI: ‘hide’} ;
  • playbackRates :(Array)播放速度选择;
  • plugins :(Object)自定义初始化选项;
  • responsive :(boolean)设置为 true 时可根据断点调整浏览器样式;
  • breakpoints :(Object)当启用 responsive 时,设置断点以配置播放器根据类名称切换外观;
  • sources :(Array)具有src和type属性的对象数组,用以定义视频信息;
  • suppressNotSupportedError :(boolean)设为 true 时,不会立即触发不兼容错误,而是在第一次用户交互时触发;
  • techCanOverridePoster :(boolean)使技术人员有可能覆盖玩家的海报并融入玩家的海报生命周期。当使用多个技术时,这可能很有用,每个技术都必须在播放新源时设置自己的海报。
  • techOrder :(Array)定义Video.js技术首选的顺序。默认 Html5 作为首选技术。其他技术将在此技术之后按其注册顺序添加。
  • userActions :(Object)用户交互行为,以下:
  • userActions.doubleClick :(boolean|function)双击事件;
  • userActions.hotkeys :(boolean|function|object)热键,f,m,k,space ;
  • userActions.hotkeys.fullscreenKey :(function)重置全屏热键,f ;
  • userActions.hotkeys.muteKey :(function)重置静音热键,m ;
  • userActions.hotkeys.playPauseKey :(function)重置暂停热键,k;
  • vtt.js :(string)允许覆盖 vtt.js 的默认 URL ,该 URL 可以异步加载到 polyfill 支持 WebVTT 。

组件参数

Video.js 播放器是一个组件。像其他所有组件一样,您可以定义其包含哪些子项、加载的顺序以及传递的参数。

  • children :(Array|Object)

如果是数组(Array),则用于定义子元素(通过组件名确定)在播放器或者其他组件中的创建顺序,例如:

  1.     // The following code creates a player with ONLY bigPlayButton and
  2.     // controlBar child components.
  3.     videojs('my-player', {
  4.         children: [
  5.             'bigPlayButton',
  6.             'controlBar'
  7.         ]
  8.     });

如果是对象(Object),则用于对其子件定义公共配置选项,也可用于禁用某些选项,例如:

  1.     // This player's ONLY child will be the controlBar. Clearly, this is not the
  2.     // ideal method for disabling a grandchild!
  3.     videojs('my-player', {
  4.         children: {
  5.             controlBar: {
  6.                 fullscreenToggle: false
  7.             }
  8.         }
  9.     });
  • ${componentName} :(Object)通过小驼峰命名法( 将 ControlBar 定义为 controlBar )命名自定义组件,这些组件可以嵌套在子孙关系中,例如:
  1.     videojs('my-player', {
  2.         controlBar: {
  3.             fullscreenToggle: false
  4.         }
  5.     });

技术参数

${techName} :(Object)为 Video.js 播放技术提供自定义选项,注意使用小写字母(如 flash” 或 “html5” )。

定义 Flash 技术文件 videojs.swf 所在的位置

  1.     videojs('my-player', {
  2.         flash: {
  3.             swf: '//path/to/videojs.swf'
  4.         }
  5.     });

推荐使用全局方式定义 videojs.swf 所在位置

  1. videojs.options.flash.swf = '//path/to/videojs.swf'

html5

  • nativeControlsForTouch :(boolean)仅支持 Html5 技术,将此选项设置 true 以强制为触摸设备提供本地控件;
  • nativeAudioTracks :(boolean)设置为 false 禁用本机音轨支持;
  • nativeTextTracks :(boolean)设置为 false 禁用本机文本轨道支持;
  • nativeVideoTracks :(boolean)设置为 false 禁用本机视频轨道支持;
  • preloadTextTracks :(boolean)设置为 false 延迟加载文本轨道,直到触发时加载。
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 视频播放插件Video.js中文使用说明 https://zhutizhen.com/15031.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章