video.js的应用

Posted 2020-12-05 miny_simp

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>