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

引入 JS 、CSS 文件

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

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

视频播放参数设置

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

<!-- via data-setup -->
<video id="vid1" class="video-js" data-setup='{}'>
    <source src="//vjs.zencdn.net/v/oceans.mp4">
</video>

<!-- via code -->
<video id="vid1" class="video-js">
    <source src="//vjs.zencdn.net/v/oceans.mp4">
</video>
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），则用于定义子元素（通过组件名确定）在播放器或者其他组件中的创建顺序，例如：

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
    children: [
        'bigPlayButton',
        'controlBar'
    ]
});

如果是对象（Object），则用于对其子件定义公共配置选项，也可用于禁用某些选项，例如：

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

技术参数

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

flash

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

videojs('my-player', {
    flash: {
        swf: '//path/to/videojs.swf'
    }
});

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

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 延迟加载文本轨道，直到触发时加载。

 

参考文档：