Vue 播放rtmp直播流

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

Vue 播放rtmp直播流

前言
一、vueVideo.vue封装
二、调用方式

前言

该组件是在vue-video-player基础上封装，支持播放mp4/rtmp等格式

一、vueVideo.vue封装

<template><div style="width:100%;height:100%" ref="videoContainer"><video-player ref="myPlayer" :options="playerOptions" v-show="contianerW"></video-player></div>
</template><script>
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
import 'videojs-flash'require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)export default {components: {},data() {contianerW: 0},props: {videoOptions: {type: Object,default: () => {return {};}}},computed: {playerOptions() {return {width: this.contianerW,sources: [{type: "rtmp/mp4",src: this.videoOptions.sourceSrc || ``}],techOrder: ['flash'],autoplay: true,controls: false,loop: false,notSupportedMessage: `当前无可播放视频源`}}},mounted() {this.contianerW = this.$refs.videoContainer.offsetWidth;},
};
</script>

二、调用方式

 .......<VueVideo :videoOptions="videoOptions"></VueVideo>...
...
import VueVideo from "$pc/components/vueVideo";components: {VueVideo},
....
....data() {return {videoOptions: {sourceType: 'video/mp4',sourceSrc : '视频流地址'},};},

Vue 播放rtmp直播流相关推荐

浏览器不支持flash插件之后，h5播放rtmp直播流的解决方案
浏览器不支持flash插件之后,h5播放rtmp直播流的解决方案使用http-flv 原文链接目录: 相关资源: 背景几种视频流比较 http-flv搭配flv.js播放方案 flv.js延迟问题 ...
vue-cli3.0实现播放rtmp直播流
前言: 用vue来实现播放rtmp,代码很简单,主要用的ckplayer, 在使用过videojs,video等其他插件以后,在播放视频直播流这里,觉得还是ckplayer比较给力,这里说下使用方法 ...
vue 播放rtmp 直播拉流视频
一.写插件 <template><videoref="videoPlayer"class="video-js vjs-default-skin vjs- ...
Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流
https://blog.csdn.net/weixin_34037173/article/details/86120075
h5 rtmp推荐控件_H5浏览器播放RTMP直播流
Insert title here id="my-player" class="video-js" controls preload="auto&qu ...
C++ RTMP直播流播放器
抛开flash,自己开发实现C++ RTMP直播流播放器众所周知,RTMP是以flash为客户端播放器的直播协议,主要应用在B/S形式的场景中.本人研究并用C++开发实现了RTMP直播流协议的播放器 ...
LiveQing直播点播流媒体如何关闭指定类型的流播放HTTP-FLV直播流|WS-FLV直播流|HLS(m3u8)直播流|RTMP直播流
流媒体服务可以分发输出,HTTP-FLV直播流.WS-FLV直播流.HLS(m3u8)直播流.RTMP直播流,在某些场景下,我们不希望用户播放指定类型的流,那么如何做呢? RTMP直播点播流媒体服务 ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...
使用ffmpeg+nginx将rtmp直播流转为hls直播流
ffmpeg的安装和nginx的安装在之前的博客中有详细的讲解. mac搭建nginx+rtmp直播流 1.配置nginx (1)配置rtmp直播 rtmp {server {listen 1935 ...

Vue 播放rtmp直播流

Vue 播放rtmp直播流

前言

一、vueVideo.vue封装

二、调用方式

Vue 播放rtmp直播流相关推荐

最新文章

热门文章