首页 > Web开发 > 详细

video.js的应用

时间:2018-07-20 18:29:37      阅读:139      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!