注:源码程序仅做学习研究借鉴美工之用,请在24小时内删除所下载的资源! 请勿用于商业和违法用途,无任何技术支持!

初识视频播放插件 video.js

因为博客会分享一些视频,而 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>
  1. 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

定义 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
分享海报

1. 本站所有资源来源于用户上传和网络,如有侵权请立即邮件通知我们!

2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

4. 请在使用前查毒 (这也是您使用其它网络资源所必须注意的) !

5. 本站所有资源,均不包含技术服务,请大家自行研究学习请大家谅解!

6. 如有链接无法下载、失效或广告,请联系管理员处理!

7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

8. 如遇到加密压缩包,默认解压密码为"www.heyunzy.com",如遇到无法解压的请联系管理员!

9.下载的源码无任何问答服务或安装服务!

10.源码属于可复制的产品,无任何理由退款!

11.精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家请进行甄别。

评论0

请先
绯雨骑士团_二次元美少女动漫卡通三网H5卡牌回合手游_2023年4月2日最新打包win服务端源码_通用视频架设教程_附带假人工具_完整CDK后台_完善GM物品后台工具
绯雨骑士团_二次元美少女动漫卡通三网H5卡牌回合手游_2023年4月2日最新打包win服务端源码_通用视频架设教程_附带假人工具_完整CDK后台_完善GM物品后台工具
9分钟前 有人购买 去瞅瞅看

【限时促销】【赞助终身至尊168全站下载】【随着资源增加,即将涨价399】!立即抢购

显示验证码
没有账号?注册  忘记密码?