rtmp用video.js播放时遇见的问题和一些通用样式

最新推荐文章于 2024-06-18 11:51:32 发布

会喷水的小鱼

最新推荐文章于 2024-06-18 11:51:32 发布

阅读量978

点赞数 1

分类专栏： web前端文章标签： rtmp video.js

本文链接：https://blog.csdn.net/weixin_42829419/article/details/93334378

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 	<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;
}