Videojs Tips for use

Videojs Online has many, can direct Baidu download on line, quote his css,js, use video in the page, the following CSS modification can be changed directly in Video.js

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++) {        = videos[i];          >  -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?

. vjs-paused. vjs-big-play-button,.vjs-paused.vjs-has-started. Vjs-big-play-button {    display:block;}

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.

. 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 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.

. video-js.vjs-playing. Vjs-tech {    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