2
video.js/videojs-contrib-hls 实现hls拉流播放
source link: https://blog.51cto.com/u_15813007/5815862
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
video.js/videojs-contrib-hls 实现hls拉流播放
精选 原创videojs-contrib-hls拉流播放
主要是因为之前使用西瓜播放器插件实现hls拉流播放时，安卓手机是正常的，但是苹果一直打转，pc端的话https格式也播放不来，pc端的话去掉s改为http即可进行播放
步骤1下载videojs-contrib-hls依赖(没有下载video.js的也下载一下这个)
npm i videojs-contrib-hls --save
npm i video.js --save
npm i video.js --save
步骤2. main中引入video-js.css
import 'video.js/dist/video-js.css'; // video.js样式
步骤3.vue页面代码
<template>
<div class="viedo" v-show="status == 4">
<video
id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="375"
height="200"
:poster="coverpic"
>
<source
v-show="hlsDownAddress"
:src="hlsDownAddress"
type="application/x-mpegURL"
/>
</video>
</div>
</template>
<div class="viedo" v-show="status == 4">
<video
id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="375"
height="200"
:poster="coverpic"
>
<source
v-show="hlsDownAddress"
:src="hlsDownAddress"
type="application/x-mpegURL"
/>
</video>
</div>
</template>
步骤4.在使用的页面中引入videojs-contrib-hls和video.js
import videojs from 'video.js';
import 'videojs-contrib-hls';
import 'videojs-contrib-hls';
步骤5.在data中先定义一下
data(){
return{
player: null,
}
}
return{
player: null,
}
}
步骤6.methos中写配置
methods:{
getVideo() {
this.player = videojs(
'my-video',
{
bigPlayButton: true, // 显示播放按钮
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true, // 显示控件
},
function() {
if (this.hlsDownAddress) {
this.play();
}
}
);
}
}
getVideo() {
this.player = videojs(
'my-video',
{
bigPlayButton: true, // 显示播放按钮
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true, // 显示控件
},
function() {
if (this.hlsDownAddress) {
this.play();
}
}
);
}
}
步骤7.在挂载方法使用
mounted(){
// 延迟一秒来唤起播放器
this.timers = setTimeout(() => {
that.$nextTick(() => {
that.getVideo();
});
}, 1000);
}
// 延迟一秒来唤起播放器
this.timers = setTimeout(() => {
that.$nextTick(() => {
that.getVideo();
});
}, 1000);
}
步骤8.页面关闭的时候销毁
beforeDestroy() {
this.player.dispose(); // 关闭控件
},
this.player.dispose(); // 关闭控件
},
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK