Video. js changes the ui, and video. js uses the ui

Video. js changes the ui, and video. js uses the ui

1 <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 =" {} "> 3 <source src =" video/2.mp4 "type =" video/mp4 "/> 4 <! -- Load hls video --> 5 <source src = "http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type = "application/x-mpegURL"> 6 <! -- Load rtmp video --> 7 <source src = "rtmp: // live.hkstv.hk.lxdns.com/live/hks" type = "rtmp/flv"/> 8 </video>

The poster attribute is used to set the preview image.

Source is used to set the video address

Obtain various default UIS in video

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

I only found a stupid method.

You can see a UI array in the console and select the variable you want to change. For example, I want to delete the full screen icon and re-Add the full screen event.

MyPlayer. controlBar. removeChild (c [15]); var SBtn = myPlayer. controlBar. addChild ('button '); SBtn. addClass ('vjs-fullscreen-control'); SBtn. add
// Add the id attribute SBtn to the custom full-screen button. setAttribute ('id', 'fs'); // The Code myPlayer. on ('play', function (event) {event. preventDefault ();/* Act on the event */played = true; console. log ('play'); $ ("# md-video-title "). hide () ;}); // code myPlayer to be processed when it is stopped. 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 ("zoom in video"); $ ('# mymodal '). modal ('toggle ') $ ("# hide-container "). after ($ ("# my_video"); $ ("# my_video" ).css ({width: '000000', height: '000000', 'border-color ': '# ffff'}); if (played) {myPlayer. play ();}});