因为需要对接监控，在网上找了很多文章参考，都会报错，本文附上一篇实测有效的组件

装载video.js

npm install --save video.js

支持HLS

npm install --save videojs-contrib-hls

代码实例

<template><!--在视频外面加一个容器--><div class="input_video"><video id="myvideo" class="video-js vjs-default-skin" controls preload="auto" disablePictureInPicturestyle="width: 100%; height: 100%; object-fit: fill" autoplay muted></video></div>
</template>
<script>
import videojs from "video.js";
import "videojs-contrib-hls";// npm install --save video.js
// npm install --save videojs-contrib-hlsexport default {props: [ // 接收父组件的数据'url'],data() {return {videoPlayer: null,options: {controls: true,preload: 'none',bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true,playbackRates: [0.5, 1, 1.5, 2, 2.5, 3]}};},created() {console.info("视频流地址" + this.url)},mounted() {this.initVideo();},beforeDestroy() {if (this.player) {this.player.dispose()}},methods: {initVideo() {var myPlayer = videojs('myvideo', this.options, function onPlayerReady() {this.on('error', function () {// 报错信息var mediaError = this.error()console.log('mediaError', mediaError)myPlayer.createModal(mediaError.message);})})myPlayer.src([{type: "application/x-mpegURL",src: this.url //CCTV3频道}]);myPlayer.play();this.videoPlayer = myPlayer;},setVideoPlay(url) {this.videoPlayer.src([{type: "application/x-mpegURL",src: url //CCTV3频道}]);this.videoPlayer.play();},suspended(){this.videoPlayer.pause();//暂停}},
};
</script>
<style>
.input_video {width: 100%;height: 100%;margin: 0 auto;
}
</style>

调用Demo

<template><div class="body_div"><Videoplayer class="video" ref="videoplayer" :url="url"></Videoplayer><el-input v-model="input" placeholder="请输入流地址"></el-input><el-button type="success" @click="play()">播放流文件</el-button></div>
</template><script>
import Videoplayer from '@/components/Video';
export default {name: 'Hlsplayer',components: {Videoplayer},data() {// http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8return {url: "",input: ""};},created() {},beforeDestroy() {},methods: {play() {this.$refs.videoplayer.setVideoPlay(this.input)}}
}
</script>
<style scoped>
.body_div {width: 100vw;height: 100vh;background-color: #081135;
}.video {width: 50vw;height: 50vh;
}
</style>

src type类型

type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目

VUE实现加载HLS数据流相关推荐

webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
vue模拟加载更多功能（数据追加）
使用vue制作加载更多功能,通过ajax获取的数据往data里面push经常不成功,原因是push是往数组中追加数据内容的,而不能用作数组之间的拼接,ajax获取的数据就是数组形式的,因此不成功,应该 ...
笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 1 data() { 2 return { 3 lo ...
[vue] 第一次加载页面时会触发哪几个钩子？
[vue] 第一次加载页面时会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
Vue 页面加载闪现出现{{xxx}}问题
Vue 页面加载闪现出现{{xxx}}问题,猜测应该是犹豫网络延迟或者什么原因导致加载vue.js CSS中 [v-cloak] {display: none; } HTML中 <div v-c ...
render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
vue 动态加载图片路径报错解决方法
vue 动态加载图片路径报错解决方法参考文章: (1)vue 动态加载图片路径报错解决方法 (2)https://www.cnblogs.com/qingcui277/p/8930507.html ...
Vue首页加载过慢解决方案
Vue首页加载过慢解决方案参考文章: (1)Vue首页加载过慢解决方案 (2)https://www.cnblogs.com/annie211/p/10825568.html 备忘一下.

VUE实现加载HLS数据流

装载video.js

代码实例

src type类型

VUE实现加载HLS数据流相关推荐

最新文章

热门文章