• videojs和videojs-markers

    文章目录

    videojs

    video.js是一款基于HTML5的网络视频播放器。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件），Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。支持在桌面和移动设备上播放视频。
    Video.js相比HTML5原生的video标签视频播放的优点：

    • 有良好的跨浏览器的样式，更美观
    • 支持流媒体格式
    • 支持社交媒体平台，例如Youtube，Vimeo等
    • 有丰富的第三方插件
    • 没有浏览器兼容问题

    videojs官网：https://videojs.com/

    安装使用

    安装：npm install videojs

    <head>
  <link href="https://vjs.zencdn.net/8.6.0/video-js.css" rel="stylesheet" />

  
  
head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <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/" target="_blank"
        >supports HTML5 videoa
      >
    p>
  video>

  <script src="https://vjs.zencdn.net/8.6.0/video.min.js">script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    videojs常用选项

    名称类型说明
    autoplay booleantrue/false，播放器准备好之后，是否自动播放 【默认false】
    controls booleantrue/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
    heightstring|number视频容器的高度，字符串或数字（单位像素） 比如： height:300 or height:‘300px‘
    widthstring|number视频容器的宽度, 字符串或数字 单位像素
    loop booleantrue/false 视频播放结束后，是否循环播放
    muted booleantrue/false 是否静音
    posterstring播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL
    preloadstring预加载，建议浏览器是否应在加载元素后立即开始下载视频数据。支持的值如下：‘auto’：立即开始加载视频（如果浏览器支持）。‘metadata’：仅加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据将通过下载几帧视频来加载。‘none’：不要预加载任何数据。浏览器将等待用户点击“播放”开始下载。
    srcstring要嵌入的视频源的源URL。

    video.js特定选项

    名称类型说明
    aspectRatiostring将播放器置于流体模式，并在计算播放器的动态大小时使用该值。该值应表示比率 - 由冒号（例如"16:9"或"4:3"）分隔的两个数字。
    autoSetupboolean阻止播放器为具有data-setup属性的媒体元素运行autoSetup 。注意：必须在与videojs源加载生效的同一时刻全局设置videojs.options.autoSetup = false。
    childrenArray|Object此选项继承自基Component类。
    fluidboolean设置true，Video.js播放器将具有流畅的大小。它将扩展以适应其容器。此外，如果元素具有"vjs-fluid"，则此选项自动设置为true。
    inactivityTimeoutnumberVideo.js表示用户通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件与玩家进行交互。在inactivityTimeout决定了不活动的许多毫秒声明用户闲置之前是必需的。值为0表示没有inactivityTimeout，用户永远不会被视为非活动状态。
    languagestring默认值：浏览器默认值或’en’。与播放器中的一种可用语言匹配的语言代码。这为播放器设置了初始语言，但始终可以更改。
    languagesObject自定义播放器中可用的语言。此对象的键将是语言代码，值将是具有英语键和翻译值的对象。注意：通常不需要此选项，最好将自定义语言传递给videojs.addLanguage()所有玩家
    nativeControlsForTouchboolean明确设置关联技术选项的默认值。
    notSupportedMessagestring允许覆盖Video.js无法播放媒体源时显示的默认消息。
    playbackRatesArray严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。如果指定，Video.js显示控件（类vjs-playback-rate）允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。
    pluginsObject支持在初始化播放器时使用自定义选项自动初始化插件 - 而不是要求您手动初始化它们。

    videojs-markers

    安装使用

    安装：npm install videojs-markers
    使用：包括jquery.min.js, video-js.css and video.js

    <link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<link href="src/to/videojs.markers.css" rel="stylesheet">
...
<script src="http://code.jquery.com/jquery-2.0.3.min.js"> script>
<script src="http://vjs.zencdn.net/4.3/video.js">script>
<script src='src/to/videojs.markers.js'>script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    // initialize video.js
var player = videojs('video-id');

//load the marker plugin
player.markers({
   markers: [
      {
         time: 9.5,
         text: "put"
      },
      {
         time: 16,
         text: "any"
      },
      {
         time: 23.6,
         text: "text"
      },
      {
         time: 28,
         text: "here"
      }
   ]
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    说明

    名称类型说明
    markerStyleObject默认值只涉及到width, border-radius，background-color；但也会应用任何其他css。设置方形橙色标记：`{ 'width':'7px', 'border-radius': '0%', 'background-color': 'orange' }`
    markerTipObject悬停在标记提示上的选项。
    breakOverlayObject每个标记处的打断覆盖选项。
    onMarkerReachedFunction每当播放达到标记的时间间隔时，就会触发此回调函数。
    onMarkerClickFunction单击标记时会触发此回调函数。
    markersArray要显示的标记数组。

    markerTip可设置的参数：

    • display：Boolean
    • text：Function
    • time：Function

    breakOverlay可设置的参数：

    • display：Boolean，默认值false
    • displayTime：Integer，默认值3s
    • style：Object
    • text：Function

    markers可设置的参数：

    {
   time : 10,
   text: "marker text 1",
   overlayText: 'overlay text 1',
   class: 'custom-marker-class'
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    方法

    方法说明
    getMarkers返回插件中当前标记的数组，按升序排列。
    next转到视频中当前时间的下一个标记。如果没有下一个标记，那么什么也不做。
    prev转到视频中当前时间的上一个标记。如果没有上一个标记，那么什么也不做。
    updateTime从v0.5.0开始，我们允许动态修改标记的时间（从传入的原始标记对象开始）。一旦更改了标记时间，就应该调用updateTime来立即反映UI中的更改。
    remove删除给定索引数组中的标记。请注意，索引是基于0的（例如，第一个标记的索引为0）。
    removeAll移除播放器中的所有标记。
    add动态添加新标记。
    reset重置视频中的所有标记。这相当于removeAll然后添加新标记。
    destroy销毁插件。调用此函数后，player.markers应未定义。

    示例：

    // setup plugin
player.markers({
   markerStyle: {
      'width':'7px',
      'border-radius': '30%',
      'background-color': 'red'
   },
   markerTip:{
      display: true,
      text: function(marker) {
         return "Break: "+ marker.text;
      },
      time: function(marker) {
         return marker.time;
      }
   },
   breakOverlay:{
      display: false,
      displayTime: 3,
      style:{
         'width':'100%',
         'height': '20%',
         'background-color': 'rgba(0,0,0,0.7)',
         'color': 'white',
         'font-size': '17px'
      },
      text: function(marker) {
         return "Break overlay: " + marker.overlayText;
      }
   },
   onMarkerClick: function(marker) {},
   onMarkerReached: function(marker) {},
   markers: [{
      time: 9.5,
      text: "marker",
      overlayText: 'overlay',
      class: 'custom-marker'
   }]
});

// plugin api
player.markers.next();
player.markers.prev();
player.markers.remove([1,2]);
player.markers.removeAll();
player.markers.add([{ time: 40, text: "I'm added"}]);
player.markers.reset([{ time: 23, text: "I'm reset"}]);
player.markers.destroy();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
  • 相关阅读:
    day-56 代码随想录算法训练营（19）动态规划 part 16
    Java开发之多线程包含代码调试【面试篇 持续更新】
    L2-027 名人堂与代金券
    【项目开发 | C语言项目 | C语言课程管理系统】
    【PCL】NDT点云配准（Registration）
    [附源码]SSM计算机毕业设计新闻发布和评论管理系统JAVA
    查看apk版本号
    SpringCloud 学习笔记（2 / 3）
    公交查询系统
    【C语言】输入一个正整数，判断其是否为素数
  • 原文地址：https://blog.csdn.net/weixin_43956958/article/details/133877532