昆明大型网站建设费用,平台手机端网站开发,男和男做那个视频网站好,电商网站设计公司有哪些采用的技术是vueflv.js
前言
常见视频流格式 ● RTMP#xff08;推流端、拉流端#xff09; ● RTSP#xff08;推流端#xff09; ● HLS#xff08;拉流端#xff09; ● FLV#xff08;拉流端#xff09;
视频流是否依赖插件直播/点播协议web/移动端flv否直播点播…采用的技术是vueflv.js
前言
常见视频流格式 ● RTMP推流端、拉流端 ● RTSP推流端 ● HLS拉流端 ● FLV拉流端
视频流是否依赖插件直播/点播协议web/移动端flv否直播点播HTTP-FLVwebRTSP浏览器不能直接播放【只能通过转码或者插件】直播点播RTSP协议webhls【以m3u8后缀结尾】否【浏览器用video.js可以播放但5秒左右的延迟】点播基于httpios系统RTMP浏览器中用flash播放器 但谷歌在2020年底带头不支持flash插件 或者 video.js直播RTMPweb/移动端 RTSP
需要安装插件或者转码 vue播放rtsp视频流
方案二RTSP转RTMP到RTMP服务器转http-flv播放端用flv.js播放 方案三RTSP转RTMP到RTMP服务器转hls播放端用video.js播放 方案四VLC或者SmartPlayer第三方插件播放 方案五RTSP转WebRTC播放
HLS
Http Live Streaming 简称HLS) 是苹果公司(Apple Inc.)实现的基于HTTP的流媒体传输协议它在移动 Web 浏览器支持挺好所以现在好多移动端直播都在用此协议。但在 PC Chrome,Firefox 上不支持所以还需要借助flash 或者 video.js 这个插件但是它不直接支持播放 HLS 协议的播放. 需要借助 videojs-contrib-hls 找见了这个库FZ-live 我看他也是基于 video.js 的。 还有个要求就是资源 不能跨域需要在同一域下。 而且因为HLS流是分片下载播放需要浏览器先下载然后播放所以延迟很高在十秒多甚至更多。并且对浏览器和网速的要求还是比较高的视频流畅度取决于网速。
可实现流媒体的直播和点播 ,主要应用在iOS系统为iOS设备(如iPhone、iPad)提供音视频直播和点播方案。
video.js
npm install video.js
npm i videojs-contrib-hls --savevue3-video-player
EasyPlayer.js
使用开源的EasyPlayer.js播放这个控件支持多种流的播放网上选择的也比较多。GITHUB
RTMP
需要安装插件 video.js 插件能提供 RTMP 的播放 但是需要flash支持 VLC media player用于检测rtmp是否可以正常播放https://www.videolan.org/vlc/ rtmp视频流实际上就是以rtmp流媒体协议生成的流媒体
视频流视频流其实就是流媒体streaming media是指将一连串数据压缩后经过网络分段发送即时传输以供观看音视频的一种技术。监控、直播等实时播放的功能一般都使用的是流媒体。 流媒体协议流媒体协议是一种标准化的传递方法用于将视频分解为多个块将其发送给视频播放器播放器重新组合播放常见的有rtmp、hls、hds、mss、MPEG-DASH等。 视频格式format视频格式指视频文件格式container fORMat。常见 container format 包括 .mp4、.m4v、.avi、.mov等。
FLV【已自测】
HTTP FLV则是将RTMP封装在HTTP协议之上的可以更好的穿透防火墙等。rtmp和http-flv的视频格式都是flv格式的只是传输协议而不同。rtmp是tcp的传输协议而http-flv是http长链接的传输协议。
官方文档 中文文档 官方文档
flvjs
flvjs是一个H5播放器。HTTP FLV是一种协议。FLV是一种格式。flvjs可以用于播放FLV格式的视频。 flvjs是一个较成熟的前端处理flv格式的插件库是B站视频的开源插件纯原生 JavaScript 开发没有用到 Flash。
概览 一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFFMP4 碎片片段然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
flv.js 是使用 ECMAScript 6 编写的然后通过 Babel Compiler 编译成 ECMAScript 5使用 Browserify 打包。
推流端视频编码必须是H.264
1. 安装
npm install --save flv.js2. 引入
搭建组件
template!-- 增加静音属性muted --videoautoplaymutedidmyVideo/video
/templatescript setup langts
/* eslint-disable */
import { ref, onMounted, onUnmounted } from vue;
import flvjs from flv.js/dist/flv.min.js; // 代替 import flvjs from flv.js; 否则504const props defineProps{videoSrc: string;
}();const flvPlayer refany(); // 要声明一个播放器的容器 flvPlayeronMounted(() {//在mounted声明周期里调用 如果出现DOM没加载出来的原因 可以使用定时器videoPlayer();
});const videoPlayer () {// flvjs.isSupported() 判断当前浏览器是否支持flv。if (flvjs.isSupported()) {var videoElement document.getElementById(myVideo);flvPlayer.value flvjs.createPlayer(// 创建直播流加载到DOM中去{type: auto, // 媒体类型 flv 或 mp4默认 flv// isLive: true, // 是否是直播流// hasAudio: true, // 是否有音频// hasVideo: true,// enableStashBuffer: true,url: props.videoSrc}// {// cors: true, // 是否跨域// enableWorker: false, // 是否多线程工作// enableStashBuffer: false, // 是否启用缓存 关闭IO隐藏缓冲区// stashInitialSize: 128, // 缓存大小(kb) 默认384kb// autoCleanupSourceBuffer: true, // 是否自动清理缓存// lazyLoad: false// });flvPlayer.value.attachMediaElement(videoElement); // 挂载video标签。flvPlayer.value.load(); //加载流// flvPlayer.value.play(); //播放流// !!!!!!这里需要注意有的时候load加载完成不一定可以播放要是播放不成功用settimeout 给下面的this.player.play() 延时几百毫秒再播放setTimeout(() {flvPlayer.value.play(); //播放流}, 1000);}
};// 在销毁的声明周期中 必须要销毁掉播放器的容器不然会占用TCP个数导致其他页面的监控也播放不了
onUnmounted(() {if (flvPlayer.value) {flvPlayer.value.pause();flvPlayer.value.unload();flvPlayer.value.detachMediaElement();flvPlayer.value.destroy();flvPlayer.value null;}
});defineExpose({videoPlayer
});
/scriptstyle langscss scoped
video {height: 100%;width: 100%;
}
/style
⚠️ 流地址 也可以不是flv结尾的
webrtc播放
webrtc可实现的功能特别强大网上可参考的资料很少目前尝试的是webrtc-streamer插件实现了rtsp直接播放
有时候视频加载不出来不是前端代码的问题而是视频流提供的有问题可以参看我这篇文章测试一下自己得到的flv是否正常 https://blog.csdn.net/changyana/article/details/126304833
我代码中的url是一个目前可用的在线测试的flv只要视频流正常就可以在前端加载出来了
测试-视频流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
使用flv时候开发遇到的问题
报错 504 解决方式引入方式改变
import flvjs from flv.js/dist/flv.min.js; // 代替 import flvjs from flv.js; 否则504视频不自动播放 解决方式增加autoplay 属性
videocontrolsautoplaymutedidmyVideo/video联调时候报错DemuxException: type CodecUnsupported, info Flv: Unsupported codec in video frame: 2 解决方式 推流加上参数:-vcodec h264表示强制使用h264进行编解码。-------------未解决 报错502 强制刷新 即可 DOMException: play() failed because the user didn’t interact with the document first 原因因为用户没有先操作文档【用户没有先去跟网页做交互再执行音频播放】 Chrome的autoplay政策在2018年4月做了更改。 新的行为浏览器为了提高用户体验减少数据消耗现在都在遵循autoplay政策Chrome的autoplay 政策非常简单 muted autoplay始终被允许 解决方案 建议您再播放资源前进行页面交互动作比如点击后再播放或者您可以在构建 DOM 元素时先设置 muted“muted” 属性调用 play 后再修改静音属性试下是否可以正常如果使用的是 5.X 版本在获取的 track 的时候做一个判断如果是音频就不做 track.play()用户点击的时候进行 play()
使用videojs开发播放hls视频
测试地址【http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8;】 Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document 设置muted 静音 和上面的问题5的原因一样 黑屏 中间有播放按钮。但是不播放 也不报错 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. 设置data-setup“{}” video.es.js:222 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. 出现的原因是你提供的视频连接可能没有扩展名导致这样videojs无法知道视频的格式。 需要在type属性指定播放视频的格式即可。 video.es.js:222 VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) HLS playlist request error at URL VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) The media playback was aborted due to a corruption problem or because the media used features your browser did not support. 跨域 需要后端解决 在响应中添加CORS标头添加add_header Access-Control-Allow-Origin *; 不是在播放端nginx是在提供视频服务的Nginx添加
优秀文章 优秀文章
我先测试了能不能播放rtmp格式 但是需要flash插件 然后我播放hls
templatevideoidmy-videorefmyPlayerclassvideo-jscontrolsmutedpreloadautowidth340height164/!-- data-setup{} --!-- source:srcsrctypertmp/flv//video --!-- sourcesrc./MY_VIDEO.mp4typevideo/mp4//video --
/templatescript setup langts
/* eslint-disable */
import videoJs from video.js;
import { ref, nextTick, onMounted, onUnmounted } from vue;
import videojs-flash;
// const src src/components/video/MY_VIDEO.mp4;
const src http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8;
const myPlayer ref();onMounted(() {// nextTick(() {setTimeout(() {init();});// });
});const init () {// videoJs.options.flash.swf https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf;myPlayer.value videoJs(my-video, {autoplay: muted, //自动播放controls: true, //用户可以与之交互的控件loop: true, //视频一结束就重新开始muted: false, //默认情况下将使所有音频静音cors: true,// aspectRatio: 16:9, //显示比率// fullscreen: {// options: { navigationUI: hide }// },// techOrder: [html5, flvjs], // 兼容顺序// html5: {hls: {withCredentials: true},// },sources: [{src,type: application/x-mpegURL// type: video/mp4// type: rtmp/flv}]});// setTimeout(() {// myPlayer.value.src([// {// src,// type: video/mp4// }// ]);setTimeout(() {// myPlayer.value.load();myPlayer.value.play(); //播放流}, 100);// }, 1000);
};onUnmounted(() {if (myPlayer.value) {myPlayer.value.dispose();}
});
/scriptstyle langscss scoped/style
