一、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}// 获取承载元素domlet 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.htmlvideoDom.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

VUE--播放视频(RTMP、FLV、HLS、Webrtc)相关推荐

JavaCV音视频开发宝典：JavaCV实现mp3音频直播FM在线电台服务，无需流媒体服务，浏览器原生audio标签直接播放mp3，支持rtsp/rtmp/flv/hls/本地音视频源直接转码到mp3
<JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录前言之前写过使用JavaCV实现webm直播的文章: <JavaCV音视频 ...
vue 播放视频，默认有视频封面
前几天做视频管理器,原计划使用vue-video-player 库来播放视频,但是发现这个库播放视频,好像需要自己手动截封面[ps: 没有仔细研究vue-video-player,如果这里有不对的地方 ...
SkeyeWebPlayer免费网页RTSP/RTMP/FLV/HLS/H265/M3U8直播点播播放器-页面动态多播放器添加代码示例
强大的网页直播/点播播放器 SkeyeWebPlayer,使用简单,功能强大, 终身免费使用,支持Windows. Android.iOS平台. SkeyeWebPlayer.js H5播放器是由成都 ...
JavaCV开发详解之25：简单视频截图，视频文件和rtsp/rtmp/flv/hls等直播流截取一张图片
javacv实战专栏目录: JavaCV实战专栏文章目录(JavaCV速查手册) 前言我们之前实现了连续截图和覆盖截图,由于单张截图比较简单,使用FrameRecorder录制器就可以很方便的实现, ...
1，vue播放视频之—引入.m3u8后缀的hsl视频流
效果图: 我这个是引入js的方式播放的.也可以用npm直接下载hsl.sj进行引入 1.public里面index.html页面引入对应的js <script src="./jquer ...
vue播放视频使用原生video标签基本功能（不含样式）
直接上代码: <template><div style="display: flex"><!-- 原生video标签,controls表示为可控制视频 ...
nginx实现，一推多用（rtmp推流，rtmp+flv+hls（m3u8）同时拉流），使用案例+使用方法
https://blog.csdn.net/xiaonuo911teamo/article/details/108684043
下一代低延时直播CDN：HLS、RTMP 与UDP +WebRTC
在上月落幕帷幕的多媒体领域技术盛会--LiveVideoStackCon2018音视频技术大会上,阿里云的高级技术专家李刚进行了<下一代低延时的直播CDN>技术分享.本文由云栖社区整理,并 ...
如何从零开始搭建直播平台，从flash时代的rtmp到过渡期的flv和webrtc的未来以及简单聊聊webassmbly
前言在2020年12月flash正式落幕之后,流媒体领域是否有新的技术替代?有没有较为成熟的整体方案?市面上的直播/流媒体平台都在使用哪些方案?有没有通用又简单快速的搭建方案?不同的方案在行业内部也 ...
Http Live Streaming 实现iphone在线播放视频[转]
http://hi.baidu.com/lphack/item/83865611c5f82c8988a956df 本人新手,难免会出错,请各位指点! 最近要做一个项目,是通过iphone来播放工厂摄像 ...

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