VUE--播放视频(RTMP、FLV、HLS、Webrtc)

一、RTMP(需要Flash支持)

VLC media player用于检测rtmp是否可以正常播放

链接：官方下载：VLC media player，最棒的开源播放器 - VideoLAN

npm install video.js@5.6.0

<template>
	<view>
		<video id="rtmpPlayer" ref="rtmpPlayer" :destroyOnClose="true"
			class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js" preload="auto" muted>
		</video>
	</view>
</template>

<script>
	import videojs from 'video.js'
	import 'video.js/dist/video-js.css'
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.myPlayerRtmp = videojs('rtmpPlayer', {
				sources: [{
					type: 'rtmp/flv',
					src: 'rtmp://ns8.indexforce.com/home/mystream'
				}],
				controls: true,
				muted: true,
				autoplay: true,
				preload: 'auto',
				textTrackDisplay: false,
				errorDisplay: false,
				controlBar: false,
				bigPlayButton: false
			})
		},
		methods: {

		},
		beforeDestroy() {
			if (this.myPlayerRtmp) {
				const myPlayerRtmp = this.$refs.rtmpPlayer // 不能用document 获取节点
				videojs(myPlayerRtmp).dispose() // 销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function
			}
		},
	}
</script>

二、FLV

npm install --save flv.js

<template>
	<div class="hello">
		<video autoplay muted controls width="100%" height="500" id="myVideo"></video>
	</div>
</template>

<script>
	import flvjs from 'flv.js'
	export default {
		data() {
			return {
				flvPlayer: '',
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.videoPlayer()
			})
		},
		methods: {
			videoPlayer() {
				if (flvjs.isSupported()) {
					var videoElement = document.getElementById('myVideo');
					this.flvPlayer = flvjs.createPlayer({
						type: 'flv',
						url: 'url' //你的url地址
					});
					this.flvPlayer.attachMediaElement(videoElement);
					this.flvPlayer.load();
					this.flvPlayer.play();
				}
			},
		},
        //销毁
		beforeDestroy() {
			if (this.flvPlayer) {
				this.flvPlayer.pause();
				this.flvPlayer.unload();
				this.flvPlayer.detachMediaElement();
				this.flvPlayer.destroy();
				this.flvPlayer = null;
			}
		},
	}
</script>

三、HLS（m3u8）

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

<template>
	<div class="video-container">
		<video id="myPlayer" ref="myPlayer" :destroyOnClose="true"
			class="vjs-default-skin vjs-big-play-centered vjs-16-9 video-js" loop autoplay muted controls preload="auto">
		</video>
	</div>
</template>

<script>
	import videojs from 'video.js'
	import 'video.js/dist/video-js.css'
	import 'videojs-contrib-hls'
	export default {
		mounted() {
			this.$nextTick(()=>{
				this.init();
			});
		},
		methods: {
			init() {
				let dom_id = 'myPlayer';
				this.myPlayerHls = videojs(
					dom_id, {
						bigPlayButton: false,
						textTrackDisplay: false,
						posterImage: true,
						errorDisplay: false,
						sources: [{
							type: 'application/x-mpegURL',
							src: 'url',
						}]
					},
					function() {
						// this.play()
						// 自动播放
					}
				)
			},
		},
		//销毁
		beforeDestroy() {
			if (this.myPlayerHls) {
				const myPlayerHls = this.$refs.myPlayer // 不能用document 获取节点
				videojs(myPlayerHls).dispose() // 销毁video实例，避免出现节点不存在
			}
		},
	}
</script>

四、Webrtc

jswebrtc库链接：GitHub - kernelj/jswebrtc: JSWebrtc – 支持 SRS 的 Webrtc 播放器

在index.html中引入 

<script src="<%= BASE_URL %>js/jswebrtc.min.js"></script>

<template>
  <div id="app">
    <HelloWorld :videoSrc="videoSrc"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data(){
	return{
		videoSrc: 'webrtc://r.ossrs.net/live/livestream',
	}  
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
	<video id="jswebrtc" ref="jswebrtc" controls style="width: 100%;height: 100%;object-fit: fill">
	</video>
</template>

<script>
	export default {
		name: "HelloWorld",
		props: {
			videoSrc: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				player: null
			}
		},
		mounted() {
			this.$watch('videoSrc', () => {
				if (this.videoSrc) {
					this.initVideo(this.videoSrc)
					console.log('播放视频路径：', this.videoSrc)
				}
			}, {
				immediate: true
			})
		},
		methods: {
			/**
			 * 初始化播放器并播放
			 * 两种调用方式
			 *  一种通过 watch监听 props 传过来的 src 进行播放
			 *  一种通过 引用组件上的 ref 直接调用 initVideo 如 this.$refs.webrtc.initVideo('src')
			 * */
			initVideo(url) {
				// 播放器存在 清空重置
				if (this.player) {
					this.player.destroy()
					this.player = null
				}

				// 获取承载元素dom
				let videoDom = document.getElementById('jswebrtc')

				// 初始化播放器
				this.player = new JSWebrtc.Player(url, {
					video: videoDom,
					autoplay: true,
					onPlay: (obj) => {
						// 监听video元素状态，可播放时进行播放 。 某些情况下  autoplay 会失效
						// mdn https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event
						// 菜鸟 https://www.runoob.com/tags/av-event-canplay.html
						videoDom.addEventListener('canplay', function(e) {
							videoDom.play()
						})
						console.log(obj, '播放器开始播放！')
					}
				})
			}
		},
		beforeDestroy() {
			// 播放器存在清除播放器
			if (this.player) {
				this.player.destroy()
			}
		}
	}
</script>

测试-视频流2022/10/08

RTMP：

美国1: rtmp://ns8.indexforce.com/home/mystream

美国2: rtmp://media3.scctv.net/live/scctv_800

韩国GoodTV: rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

FLV：

超清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv
高清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-480p.flv
标清 https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv

HLS(m3u8)

https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8文章来源地址https://uudwc.com/A/53wz