vue整合videojs插件，播放RTMP，hls直播视频

1. Vue项目中安装videojs的相关依赖

npm install --save video.js
npm install --save videojs-contrib-hls
npm install --save videojs-flash
npm install --save mux.js

2.在需要播放的页面中引入js对象和css样式

import 'video.js/dist/video-js.css';
import videojs from "video.js";
import 'videojs-flash';
import 'videojs-contrib-hls';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'

3.vue中使用videojs

<template>
<div><div class="video-box"><!--style="width:100%; object-fit: fill"标签上添加此属性视频填充div区域--><video style="width:100%; object-fit: fill;border-radius: 5px"ref="liveVideo"id="liveVideo"class="video-js vjs-default-skin vjs-big-play-centered"controlspreload="auto"width="410px"height="238px"></video></div>
</div>
</template>
<script>
import 'video.js/dist/video-js.css';
import videojs from "video.js";
import 'videojs-flash';
import 'videojs-contrib-hls';
import video_zhCN from 'video.js/dist/lang/zh-CN.json'
export default {data() {return {player: null,options: {controls: true, // 是否显示底部控制栏preload: "auto", // 加载<video>标签后是否加载视频autoplay: true,playbackRates: [0.5, 1, 1.5, 2],// 倍速播放width: "394",height: "238",fluid: false,flash: {//支持rtpm播放hls: {withCredentials: false},swf: '../static/video-js.swf'//rtmp falsh播放时需要},languages: {"zh-cn": video_zhCN//播放器中文语言},sources: [{//hls协议type为application/x-mpegURL// type: "application/x-mpegURL",// src:"http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"//rtmp协议的type为rtmp/flvtype: "rtmp/flv",src: "rtmp://58.200.131.2:1935/livetv/cctv1"}],controlBar: {// 自定义按钮的位置children: [{name: "playToggle"},{name: "progressControl"},{name: "currentTimeDisplay"},{name: "timeDivider"//时间进度条},{name: "durationDisplay"},{name: "volumePanel", // 音量调整方式横线条变为竖线条inline: false},{name: "pictureInPictureToggle" //画中画播放模式},{name: "fullscreenToggle"}]}}};},mounted() {this.autoPlayVideo();},beforeDestroy() {//离开当前路由销毁播放器组件if (this.player) {this.player.dispose();//销毁播放器this.player = null;//重新加载video播放器标签，防止第二次进入页面时加载失败$(".video-box").html('<video  ref="liveVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" width="410px" + height="238px"></video>');}},methods: {autoPlayVideo() {//页面初始化加载完毕自动播放视频this.player = videojs(this.$refs.liveVideo, this.options, function onPlayerReady() {});},//切换播放视频时调用改方法changeVideo() {this.player.src([{type: "application/x-mpegURL",src: "rtmp://58.200.131.2:1935/livetv/chcatv"}]);this.player.play();},}
};
</script>
<style scoped lang="less">
.video-box /deep/ .vjs-slider-vertical .vjs-volume-level:before {left: -0.5em
}
</style>

vue整合videojs插件，播放RTMP，hls直播视频相关推荐

vue中使用Alipayer,播放rtmp,m3u8,mp4视频, vue-alipayer-v2.
这是一个基于Alipayer 开发并封装于vue的播放器由于项目需要接入rtmp协议的直播流,用于实时监控,看了网上的几个开源播放器,最后选择了阿里云的开源播放器,Alipayer,但是Alipay ...
vue中使用video-player 播放rtmp格式的视频，播放前有一小段黑屏
问题: 在vue项目中使用video-player 播放rtsp格式的视频的时候, 若视频渲染比较慢的时候, 会导致初始画面是黑屏的状态. 解决思路:监听播放状态,等数据加载完,页面可以渲染的时候再 ...
h5在IOS使用videojs插件播放hls视频
h5使用videojs插件播放hls视频踩坑点具体实现步骤 1. index.html页面引入(最好下载到本地) 2. npm install video-js 并且在需要看监控的页面引入 3. ...
EasyDarwin如何支持点播和RTMP/HLS直播？EasyDSS！
2017年很长很长一段时间没有更新EasyDarwin开源项目了,虽然心里有很多EasyDarwin功能扩展的计划:比如同步录像.同步RTMP/HLS直播输出.拉模式转发优化.Onvif接入.GB28 ...
OBS如何配置推流到RTMP流媒体服务直播视频文件直播桌面操作让微信手机端电脑浏览器无插件直播观看
OBS如何配置推流到RTMP流媒体服务直播视频文件直播桌面操作让微信手机端电脑浏览器无插件直播观看 1.下载安装OBS 1.1.官网下载 1.2.应用搜索下载 2.下载安装RTMP流媒体服务 3.获得 ...
魔坊APP项目-27-直播、客户端中调整窗口大小、能播放rtmp格式直播流的播放器模块
直播客户端中直播的界面调整和当前窗口一致 live_list.html <!DOCTYPE html> <html lang="en"> <head ...
js调用vlc_web网页中使用vlc插件播放相机rtsp流视频
可参考: vlc功能还是很强大的,有很多的现成的二次开发接口,不需配置太多即可轻松做客户端播放器或web网页播放器. 下面代码是web网页中使用vlc插件播放相机rtsp流视频: 注意: 需提前在打开 ...
vue2.x 播放rtmp,hls,m3u8直播流教程，亲测可用
网上教程挺多,但实际用起来会各种报错大部分原因是依赖的包的版本问题,因此我这里附上亲测可用的版本; 跟着步骤一步一来就行了! step1: 在package.json文件下添加所有关于直播的依赖包, ...
解决 LiveQing 流媒体服务器videojs flash播放RTMP、HLS提示错误的问题
问题 LiveQing流媒体服务器可以输出HTTP-FLV .Websocket-FLV.RTMP.HLS流,在做RTMP.HLS flash播放时候,经常会遇到网站flash被禁用的情况,每一次都会 ...

vue整合videojs插件，播放RTMP，hls直播视频

vue整合videojs插件，播放RTMP，hls直播视频相关推荐

最新文章

热门文章