vue + videojs-contrib-hls 拉流播放

当时接手拉流播放时使用的是西瓜播放器插件，神奇的是 安卓手机显示正常，但是苹果一直显示加载，pc端使用https格式不能播放，但是去掉s改为http即可进行播放 后面查看大佬文章后总算解决了这一需求 原文地址

步骤1.下载videojs-contrib-hls依赖(没有下载video.js的也下载一下这个)

npm i videojs-contrib-hls --savenpm i video.js --save

步骤2. main中引入video-js.css

import 'video.js/dist/video-js.css'; // video.js样式

步骤3.vue页面代码

<template><div class="viedo"><videoid="my-video"class="video-js vjs-default-skin vjs-big-play-centered"controlspreload="auto"width="375"height="200":poster="coverpic"><sourcev-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(); // 关闭控件},

以上就是实现的基本操作流程了 如果有不对的地方 还请斧正

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！