<link href="http://vjs.zencdn.net/7.0/video-js.min.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/7.0/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
在html中引入三个文件,直接复制就可以了。
<video style="width: 100%;height: 100%" id="my-video" class="video-js vjs-default-skin vjs-fluid vjs-big-play-centered" controls preload="auto" poster="">
<source src="" type="rtmp/flv">
</video>
type=“rtmp/flv” 这是为了播放trmp格式的推流视频,如需播放别的自行修改
标签中class 中的vjs-big-play-centered是播放按钮居中的样式
如果video标签中有data-setup="{}" 属性,这是初始化视频的如果要想在js中动态改变video的src路径先把这个去掉
下面是js文件的代码
ajax(list+'index.php?mod=kzkt&action=course&do=liveDetail',params,function(res){
console.log(res.data.course_info)
var _data=res.data.course_info
$('#my-video').attr('poster',_data.img)//视频的丰满图片
$('#my-video source').attr('src',_data.video_link)//播放视频的路径
var story_player = videojs('my-video');//初始化视频
story_player.play()//播放
})
以上按顺序来。。。。。。。
以上测试能播放成功的前提是必须要起服务,本地没有办法正常播放!!!!!!!!!!!
另加写css的样式直接复制放到自己的css文件中就可以了,另外注意自己的css文件和video.css的引入顺序,以免样式被覆盖,没有出现相要的效果。
/* 播放控制按钮变成原型 */
.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
/* 暂停是显示播放按钮 */
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
/* 点击屏幕是暂停播放 */
.video-js.vjs-playing .vjs-tech {
pointer-events: auto;
}
/* 显示播放总时间 */
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
.liactive{
background: #989898;
color: #fff;
}