Application of Video.js

1. Introduction of CSS and JS files

<href= "./plugins/video-5.5.3/video-js.css"  rel= "stylesheet"  ><src= "./plugins/video-5.5.3/video.js"></  script>

2. HTML Introduction

<VideoID= "My-player"class= "Video-js"//must add controls//whether to display the control, default display preload= "Auto"//Pre-loaded poster= "//vjs.zencdn.net/v/oceans.png"//The picture displayed before the video is loaded Data-setup= ' {} '>//Must be added<Sourcesrc= "//vjs.zencdn.net/v/oceans.mp4"type= "Video/mp4"></Source>    <Sourcesrc= "//VJS.ZENCDN.NET/V/OCEANS.WEBM"type= "VIDEO/WEBM"></Source>    <Sourcesrc= "//VJS.ZENCDN.NET/V/OCEANS.OGV"type= "Video/ogg"></Source>    <Pclass= "Vjs-no-js">video playback requires JavaScript enabled and is recommended for browser access with HTML5 support. To view this video, enable JavaScript, and consider upgrading to a Web browser that<ahref= "http://videojs.com/html5-video-support/"Target= "_blank">supports HTML5 video</a>    </P></Video>

3. JS Introduction

var playerurl = data.data; var u = {type: "rtmp/flv", src:playerurl}; var myplayer =  Videojs ("My-player");  // Initialize Video Myplayer.reset (); myplayer.src (u);

4, when the page jumps, video does not stop automatically, you can call the player.dispose () method to destroy the current video

Adopt the method of Angularjs monitor route change, listen to the page jump, destroy video when the page jumps

function (event, ToState, Toparams, FromState, fromparams) {    var myplayer =  Videojs ("My-player");  // Initialize video    Myplayer.dispose ();    // destruction });

<Videoid="My-player"class="Video-js"Controls preload="Auto"width="640"height=" the"autoplay="AutoPlay"
poster="//vjs.zencdn.net/v/oceans.png"data-setup=' {} '>
<Sourceid="VideoMP4"src="" type="rtmp/flv">
<!--<source src= "//vjs.zencdn.net/v/oceans.mp4" type= "Video/mp4" ></source>
<source src= "//VJS.ZENCDN.NET/V/OCEANS.WEBM" type= "VIDEO/WEBM" ></source>
<source src= "//VJS.ZENCDN.NET/V/OCEANS.OGV" type= "Video/ogg" ></source>-->
<Pclass="Vjs-no-js">play video needs to be enabledJavascript, recommended use supportHTML5Browser access.
To view this video, enable JavaScript, and consider upgrading to a Web browser that
        <ahref="http://videojs.com/html5-video-support/"target="_blank">
Supports HTML5 video
        </a>
</P>
</Video>

Application of Video.js