VUE--播放视频(RTMP、FLV、HLS、Webrtc)
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一、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>
三、HLSm3u8
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