网站开发过什么软件,优化大师下载安装免费,网站弹出qq聊天窗口,快速搭建一个网站一、前言
最近着手了一个新需求#xff1a;将某记录仪的实时视频在页面展现。
实现步骤#xff1a;
通过WebRtc将直播视频转码为flv/rtsp格式流#xff1b;通过Vlc或代码中的视频播放器播放视频。
常见播放flv直播视频流软件如#xff1a;VLC、PotPlayer等#xff0c;…一、前言
最近着手了一个新需求将某记录仪的实时视频在页面展现。
实现步骤
通过WebRtc将直播视频转码为flv/rtsp格式流通过Vlc或代码中的视频播放器播放视频。
常见播放flv直播视频流软件如VLC、PotPlayer等好用但无法嵌入代码。
在此介绍一种使用原生htmljs即可实现直播视频流播放的方式内网外网皆可用。
二、实现
引入Bilibili开源Flash 视频FLV播放器 方式一外网引入 https://github.com/Bilibili/flv.js 方式二内网导入把js下载下来标签引入即可 链接https://pan.baidu.com/s/1kiDJgoxGn4pQ3qCROdu0fw?pwdmyjn 提取码myjn 编写调用播放器方法
if (flvjs.isSupported()) {var videoElement document.getElementById(videoElement);var flvPlayer flvjs.createPlayer({type: flv, // 指定视频类型特别注意此处伟flvisLive: true, // 开启直播hasAudio: false, //需要设置为false不然播放不了视频cors: true, // 开启跨域访问url: url //FLV视频地址},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url用于随后的请求如查找、重新连接等。autoCleanupSourceBuffer: true //自动清除缓存});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play(); //开始播放// flvPlayer.stop(); //停止播放时打开}三、整体Demo
!DOCTYPE html
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8/
script src./flv.min.js/script
style
body,center{
padding:0;
margin:0;
}.v-container{width:640px;height:360px;border:solid 1px red;}video{width:100%;height:100%;}
/style
/head
bodyh2FLV视频播放测试/h2div classv-containervideo idvideoElement muted autoplayautoplay preloadauto controlscontrols/video/div
/body
/html
scriptif (flvjs.isSupported()) {var videoElement document.getElementById(videoElement);var flvPlayer flvjs.createPlayer({type: flv, // 指定视频类型特别注意此处伟flvisLive: true, // 开启直播hasAudio: false, //需要设置为false不然播放不了视频cors: true, // 开启跨域访问url: url //FLV视频地址},{enableWorker: false, //不启用分离线程enableStashBuffer: false, //关闭IO隐藏缓冲区reuseRedirectedURL: true, //重用301/302重定向url用于随后的请求如查找、重新连接等。autoCleanupSourceBuffer: true //自动清除缓存});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play(); //开始播放// flvPlayer.stop(); //停止播放时打开}
/script
