videojs and videojs-markers

Article directory

videojs
- Install and use
- videojs common options
- video.js specific options
videojs-markers
- Install and use
- illustrate
- method

videojs

video.js is an online video player based on HTML5. It supports HTML5 and Flash videos, as well as YouTube and Vimeo (via plug-ins). Video.js automatically detects browser support for HTML5 and automatically uses the Flash player if HTML5 is not supported. Supports video playback on desktop and mobile devices.
The advantages of Video.js compared to HTML5 native video tag video playback:

Has good cross-browser styling and is more beautiful
Support streaming media formats
Support social media platforms such as Youtube, Vimeo, etc.
There are rich third-party plug-ins
No browser compatibility issues

videojs official website: https://videojs.com/

Installation and use

Installation: npm install videojs

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

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="//i2.wp.com/vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</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 video</a
      >
    </p>
  </video>

  <script src="//i2.wp.com/vjs.zencdn.net/8.6.0/video.min.js"></script>
</body>

Videojs common options

Name	Type	Description
autoplay	boolean	true/false, whether to automatically play after the player is ready [default false]
controls	boolean	true/false Whether to have a control bar [default true], if set to false, it can only be controlled through the API. That is to say, no control buttons will appear on the interface
height	string\|number	The height of the video container, string Or number (unit pixel) For example: height:300 or height:’300px’
width	string\|number	Video The width of the container, string or number in pixels
loop	boolean	true/false Whether to loop after the video playback ends Play
muted	boolean	true/false Whether to mute
poster	string	The video screen displayed before playback will be automatically removed after playback starts. Typically passed in a URL
preload	string	preload, suggesting whether the browser should start downloading immediately after loading the element video data. Supported values are: ‘auto’: Start loading the video immediately (if the browser supports it). metadata’: Loads only the video’s metadata, which includes information such as the video’s duration and dimensions. Sometimes, metadata will be loaded by downloading several frames of video. none’: Do not preload any data. The browser will wait for the user to click “Play” to start the download.
src	string	The source URL of the video source to be embedded.

video.js specific options

Name	Type	Description
aspectRatio	string	Puts the player into fluid mode and uses this value when calculating the player’s dynamic size. The value should represent a ratio – two numbers separated by a colon (such as “16:9” or “4:3”).
autoSetup	boolean	Prevents the player from running autoSetup for media elements with the data-setup attribute. Note: videojs.options.autoSetup = false must be set globally at the same moment as the videojs source loading takes effect.
children	Array\|Object	This option is inherited from the base Component class.
fluid	boolean	Set true, the Video.js player will have a fluid size. It will expand to fit its container. Additionally, this option is automatically set to true if the element has “vjs-fluid”.
inactivityTimeout	number	Video.js indicates that the user passes “vjs-user-active” and “vjs-user-inactive” ” class and the “useractive” event to interact with the player. The inactivityTimeout determines the number of milliseconds of inactivity required before declaring the user idle. A value of 0 means there is no inactivityTimeout and the user is never considered inactive.
language	string	Default value: browser default or ‘en’. A language code that matches one of the languages available in the player. This sets the initial language for the player, but can always be changed.
languages	Object	Customize the languages available in the player. The keys of this object will be the language codes and the values will be objects with English keys and translation values. Note: This option is usually not needed, it is better to pass the custom language to videojs.addLanguage() for all players
nativeControlsForTouch	boolean	Explicitly set default values for associated technology options.
notSupportedMessage	string	Allows overriding the default message displayed when Video.js cannot play the media source.
playbackRates	Array	A number array strictly greater than 0, where 1 means normal speed (100%) and 0.5 means half speed speed (50%), 2 means double speed (200%), etc. If specified, the Video.js display control (class vjs-playback-rate) allows the user to select a playback speed from an array of selections. Options are displayed in the specified order from bottom to top.
plugins	Object	Supports automatic initialization of plugins when initializing the player using custom options – rather than requiring you to initialize manually they.

videojs-markers

Installation and use

Installation: npm install videojs-markers
Usage: including 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>

// 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"
      }
   ]
});

Description

Name	Type	Description
markerStyle	Object	The default values only involve width, border-radius, background-color; but any other css will also be applied. Set the square orange mark: `{ ‘width’:’7px’, ‘border-radius’: ‘0%’, ‘background-color’: ‘orange’ }`
markerTip	Object	Hover option for marker tips.
breakOverlay	Object	Break overlay options at each tag.
onMarkerReached	Function	This callback function is triggered whenever playback reaches the marked time interval.
onMarkerClick	Function	This callback function is triggered when a marker is clicked.
markers	Array	An array of markers to display.

Parameters that can be set by markerTip:

display:Boolean
text：Function
time：Function

breakOverlay settable parameters:

display: Boolean, default value false
displayTime: Integer, default value 3s
style: Object
text：Function

Parameters that markers can set:

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

Method

Method	Description
getMarkers	Returns the array of current markers in the plug-in , in ascending order.
next	Go to the next mark in the video at the current time. If there is no next token, then do nothing.
prev	Go to the previous mark of the current time in the video. If there is no previous mark, then nothing is done.
updateTime	Starting in v0.5.0, we allow dynamic modification of a marker’s time (starting from the original marker object passed in). Once the marker time is changed, updateTime should be called to immediately reflect the change in the UI.
remove	Removes the mark in the array at the given index. Note that the indexing is 0-based (for example, the first marker has index 0).
removeAll	Remove all markers in the player.
add	Dynamicly add new tags.
reset	Reset all markers in the video. This is equivalent to removeAll and then add new tags.
destroy	Destroy the plug-in. After calling this function, player.markers should be undefined.

Example:

// 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();