技术学习分享_CKX技术 技术资讯 video.js/videojs-contrib-hls 实现hls拉流播放

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

步骤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>

步骤4.在使用的页面中引入videojs-contrib-hls和video.js

import videojs from 'video.js';
import 'videojs-contrib-hls';

步骤5.在data中先定义一下

data(){
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();
}
}
);
}
}

步骤7.在挂载方法使用

mounted(){
// 延迟一秒来唤起播放器
this.timers = setTimeout(() => {
that.$nextTick(() => {
that.getVideo();
});
}, 1000);
}

步骤8.页面关闭的时候销毁

  beforeDestroy() {
this.player.dispose(); // 关闭控件
},
本文来自网络,不代表技术学习分享_CKX技术立场,转载请注明出处。

作者: CKX技术

上一篇
下一篇
广告位

发表回复

返回顶部