1、引入css和js文件
<link href="./plugins/video-5.5.3/video-js.css" rel="stylesheet"><script src="./plugins/video-5.5.3/video.js"></script>
2、HTML引入
<video ???id="my-player" ???class="video-js" // 必加 ???controls //是否显示控件，默认显示 ???preload="auto" //预加载 ???poster="//vjs.zencdn.net/v/oceans.png" // 视频加载前显示的图片 ???data-setup=‘{}‘> // 必加 ???<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> ???<p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。 ???To view this video please enable JavaScript, and consider upgrading to a web browser that ???<a href="http://videojs.com/html5-video-support/" target="_blank"> ???????supports HTML5 video ???</a> ???</p></video>3、js引入
var playerUrl = data.data;var u = {type:"rtmp/flv",src:playerUrl};var myPlayer = ?videojs("my-player"); ?//初始化视频myPlayer.reset();myPlayer.src(u);4、当页面跳转以后，video不会自动停止，可以调用 player.dispose() 方法销毁当前视频
采用angularjs监听路由变化的方法，监听页面跳转，当页面跳转时销毁video视频
$rootScope.$on(‘$stateChangeSuccess‘, function(event, toState, toParams, fromState, fromParams){ ???var myPlayer = ?videojs("my-player"); ?//初始化视频 ???myPlayer.dispose(); ???//销毁});<video id="my-player" class="video-js" controls preload="auto" width="640" height="360" autoplay="autoplay"
poster="//vjs.zencdn.net/v/oceans.png" data-setup=‘{}‘>
???<source id="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>-->
<p class="vjs-no-js">播放视频需要启用 JavaScript，推荐使用支持HTML5的浏览器访问。
To view this video please enable JavaScript, and consider upgrading to a web browser that
???????<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
???????</a>
???</p>
</video>
video.js的应用
原文地址：https://www.cnblogs.com/miny-simp/p/9343020.html