Videojs Tips for use

Excerpted from https://www.awaimai.com/2053.html

1 Initialization

There are two ways to initialize VIDEOJS.

1.1 Label Mode

One is <video> adding and attributes to the tag class="video-js" data-setup=‘{}‘ .

Note that both are indispensable.

When I first began to think that the value behind the empty object {} , do not put the line, resulting in the player can not be loaded, and then add to it.

1.2 js mode

Another way is through JS initialization, format:

var player = Videojs (' My-player ');

There is a requirement, that is, an ID that cannot be configured and data-setup needs to be passed <video> in.

Of course, if you don't want to initialize each of them, you can:

(function() {    var videos = document.getelementsbytagname (' video ');      for (i=0; i<videos.length; i++) {        var video = videos[i];         if (Video.className.indexOf (' Video-js ') >-1) {            Videojs (video.id). Ready (function( ){            });        }    }}) ();

2 Play button Center

Videojs The default Play button is in the upper-left corner, which is considered by the author as blocking the content.

However, it is possible to modify the parameters by <video> adding a vjs-big-play-centered class to the tag.

Like this:

class= "Video-js vjs-big-play-centered"

3 Support <audio> Music tags

Videojs 4.9 began to support <audio> the label, the way it is, the cover will not disappear when playing.

However, the above play box is still in the same way, the configuration and <video> label, you must also configure the data-setup parameters.

4 Disable automatic fullscreen in iphone safari

Many people are given the option to add a <video> parameter to the tag playsinline , as follows

<></video>

Note that it was used before the iOS10 webkit-playsinline .

5 Show Play button when paused

Videojs shows a large play button when it is not playing, and we mentioned how to center it.

So how do you show this play button when the video is paused?

There are a lot of ways to use JS solution, feeling very troublesome.

In fact, with CSS can be done:

{    display: block;}

is not very light very simple:)

6 play button turns 0 round

Videojs The default play button is a rounded rectangle, but generally we are more familiar with the round play button.

So how do you change it? or use CSS to solve.

. Video-js. Vjs-big-play-button{font-size:2.5em;Line-height:2.3em;Height:2.5em;width:2.5em;-webkit-border-radius:2.5em;-moz-border-radius:2.5em;Border-radius:2.5em;Background-color:#73859f;Background-color:Rgba (115,133,159,.5);Border-width:0.15em;Margin-top:-1.25em;Margin-left:-1.75em;}/*play arrows in the middle*/. Vjs-big-play-button. Vjs-icon-placeholder{font-size:1.63em;}/*Load Circle*/. Vjs-loading-spinner{font-size:2.5em;width:2em;Height:2em;Border-radius:1em;Margin-top:-1em;Margin-left:-1.5em;}

Because the width and height of the original center change, so margin the value should be changed accordingly

7 Click on the screen to toggle play/Pause

This is the video playback time to use more features, the workaround is as follows.

{    pointer-events: auto;}

pointer-eventsCSS is a property, used to control the mouse action, in particular, refer to the "CSS Pointer-events property".

8 Reload video files

There are always situations where we need to reload the video file.

For example, immediately play the file you just uploaded.

For example, a label like this:

 <  video  id  = "Example_video"     >  <  source  id  = "VideoMP4"   src  = "1.mp4"  />  </ video  >  <  button  id  = "Reload"  >  reload </ button  >  

That can be achieved by JS:

var video = document.getElementById (' Example_video '); var source = document.getElementById (' videoMP4 '); $ ("#reload"). Click (function() {    video.pause ()    source.setattribute (' src ', ' 2.mp4 ');    Video.load ();    Video.play ();});

Or:

var video = document.getElementById (' Example_video '); $ ("#reload"). Click (function () {    video.pause ()    video.setattribute (' src ', ' 2.mp4 ');    Video.load ();    Video.play ();});

Videojs Tips for use