video. js Use Change ui Process

Video. js is a general JS library for embedding video players in web pages. Video. js automatically detects the browser's support for HTML5, and automatically uses Flash player if HTML5 is not supported. (To support lower versions of ie, download version 5.4. 3.)

No more nonsense, just post the code for everyone. The specific code is as follows:

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered my-vedio" preload="auto" controls width="800" height="600" align="middle" poster="image/vedio.png" data-setup="{}">
  <source src="video/2.mp4" type="video/mp4" />
  <!--  Loading hls Video -->
  <source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type="application/x-mpegURL">
  <!--  Loading rtmp Video -->
  <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv" />
</video>

The poster property is used to set the preview

source is used to set the video address

Get various default UI in video

var myPlayer = videojs('my_video');
var c = myPlayer.controlBar.children();
console.log(c);

I only found one stupid way.

In console, you can see an UI array. Select the variables you want to change. For example, I want to delete the full-screen icon and add the full-screen event again

myPlayer.controlBar.removeChild(c[15]);
 var SBtn = myPlayer.controlBar.addChild('button');
 SBtn.addClass('vjs-fullscreen-control');
 SBtn.add<br> 　　 // In a custom full screen button Add to id Attribute 
 SBtn.setAttribute('id', 'fs');
 //  Code processed when playing 
 myPlayer.on('play', function(event) {
  event.preventDefault();
  /* Act on the event */
  played = true;
  console.log('play');
  $("#md-video-title").hide();
 });
 //  Code to process when stopping 
 myPlayer.on('pause', function(event) {
  event.preventDefault();
  /* Act on the event */
  played = false;
  console.log('play');
  $("#md-video-title").show();
 });
 $("#fs").on('click', function(event) {
  console.log(" Enlarge video ");
  $('#myModal').modal('toggle')
  $("#hide-container").after($("#my_video"));
  $("#my_video").css({
   width: '1140',
   height: '600',
   'border-color':'#ffffff'
  });
  if (played) {
   myPlayer.play();
  }
 });

Above is this site to introduce you video. js use change ui process, I hope to help you!