html页面通过flv.js实现视频监控直播和点播功能。

最近在做关于视频平台的直播和点播功能，服务端使用的是SRS版本，计划手机APP使用PLDroidPlayer来通过http-flv的方式实现视频的直播和点播，Web端可以使用flv.js。目前手机端没有什么问题，介绍下使用html5页面方式通过http-flv来进行视频的直播和点播，直播和点播都使用flv。

1、在点播的时候，使用yamdi对flv视频文件添加关键帧，然后将视频文件存储在nginx服务器上，同样将html页面存储在nginx的目录下，具体代码如下：

flvVod.html
<!DOCTYPE html>
<html>
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>flv.js demo</title><style>.mainContainer {display: block;width: 1024px;margin-left: auto;margin-right: auto;
}.urlInput {display: block;width: 100%;margin-left: auto;margin-right: auto;margin-top: 8px;margin-bottom: 8px;
}.centeredVideo {display: block;width: 100%;height: 576px;margin-left: auto;margin-right: auto;margin-bottom: auto;
}.controls {display: block;width: 100%;text-align: left;margin-left: auto;margin-right: auto;
}
</style>
</head><body><div class="mainContainer"><video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video></div><br><div class="controls"><!--<button onclick="flv_load()">加载</button>--><button onclick="flv_start()">开始</button><button onclick="flv_pause()">暂停</button><button onclick="flv_destroy()">停止</button><input style="width:100px" type="text" name="seekpoint" /><button onclick="flv_seekto()">跳转</button></div><script src="flv.min.js"></script>    <script>var player = document.getElementById('videoElement');if (flvjs.isSupported()) {var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://192.168.0.100/flv/fkdwc_with_meta.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load(); //加载}function flv_start() {player.play();}function flv_pause() {player.pause();}function flv_destroy() {player.pause();player.unload();player.detachMediaElement();player.destroy();player = null;}function flv_seekto() {player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);}</script>
</body></html>

2、在直播的时候，如果使用的是SRS2版本时候，会遇到CORS 头缺少 'Access-Control-Allow-Origin'问题，通过在SRS上查找问题，发现是SRS2版本上不支持第三方网站的跨域访问，在SRS3版本上已有修复，w->header()->set("Access-Control-Allow-Origin", "*");，直播的html代码如下：

flvLive.html
<!DOCTYPE html>
<html><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>flv.js demo</title><style>.mainContainer {display: block;width: 1024px;margin-left: auto;margin-right: auto;}.urlInput {display: block;width: 100%;margin-left: auto;margin-right: auto;margin-top: 8px;margin-bottom: 8px;}.centeredVideo {display: block;width: 100%;height: 576px;margin-left: auto;margin-right: auto;margin-bottom: auto;}.controls {display: block;width: 100%;text-align: left;margin-left: auto;margin-right: auto;margin-top: 8px;margin-bottom: 10px;}.logcatBox {border-color: #CCCCCC;font-size: 11px;font-family: Menlo, Consolas, monospace;display: block;width: 100%;text-align: left;margin-left: auto;margin-right: auto;}</style>
</head><body><div class="mainContainer"><video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay>Your browser is too old which doesn't support HTML5 video.</video></div><script src="flv.1.5.0.js"></script><script>if (flvjs.isSupported()) {startVideo()}function startVideo(){var videoElement = document.getElementById('videoElement');var flvPlayer = flvjs.createPlayer({type: 'flv',isLive: true,hasAudio: true,hasVideo: true,enableStashBuffer: true,url: 'http://10.139.19.55:18080/live/livestreams.flv'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}videoElement.addEventListener('click', function(){alert( '是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback )})function destoryVideo(){flvPlayer.pause();flvPlayer.unload();flvPlayer.detachMediaElement();flvPlayer.destroy();flvPlayer = null;}function reloadVideo(){destoryVideo()startVideo()}</script></body></html>

直播效果页面如下：

3、设备侧推流代码如下：

ffmpeg -re -i fkdwc.flv -vcodec copy -acodec copy -f flv -y rtmp://10.139.19.55/live/livestreams

html页面通过flv.js实现视频监控直播和点播功能。相关推荐

如何实现web浏览器无插件播放视频监控直播？
很多年前,监控视频的直播只能够进行单一的服务器传输,而如今,很多网站已经可以观看视频直播了,不过大多网站观看视频直播的时候还是需要下载插件,有时候就会碰到系统不兼容.版本不对应等问题,那么能不能实现w ...
flv.js播放视频时遇到的问题
文章目录前言一.报错二.原因三.方案前言 rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流,并通过flv.js在页面播放,带有音频的流出现播放不了问 ...
调用flv.js显示视频报错
flv.js开源地址:https://www.bootcdn.cn/flv.js/ 代码 <video class="video" id="videoElement ...
视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
使用flv.js实现视频直播
一.磨刀(准备工具) 1.下载安装 nginx:http://nginx.org/en/download.html 2.下载安装 livego:https://github.com/gwuhaolin ...
实现摄像头在内网、外网、gb28181 实现 “视频监控/直播” 的常用几种方式
对于新手来说,实现摄像头远程视频监控(包括直播.回放.云台.录像云存储.截图操作等)有哪些常用的方案,头脑很模糊,或者网上找到了很多资料,不知道这些资料是属于哪一种方案,可以满足自己的需求! 对于我来 ...
实现摄像头在内网、外网、GB28181实现“视频监控/直播”的常用几种方式
作者 :Eric 对于新手来说,实现摄像头远程视频监控(包括直播.回放.云台.录像云存储.截图操作等)有哪些常用的方案,头脑很模糊,或者网上找到了很多资料,不知道这些资料是属于哪一种方案,可以满足自己 ...
如何使用iOS实现视频的直播、点播、缓存？-HTTP Live Streaming (HLS)
本文接 <如何使用iOS实现<芈月传>的直播.点播?-HTTP Live Streaming (HLS)(一)> HLS-Demo地址:https://github.com/y ...
基于flv.js的视频自动播放
1: html <video class="video-content" id="video">您的浏览器不支持 HTML5 video! < ...
ffmpeg RSTP基于Html5视频监控直播工业设备健康度检测应用
设备管理健康系统,用于设备维护管理业务和状态在线集中监测,以达到如下目的. 建立设备树型结构.构建功能位置与技术属性相结合的设备主数据结构编码体系,建立完备的设备信息台账,提供连续使用历史记录,完善预 ...

html页面通过flv.js实现视频监控直播和点播功能。

html页面通过flv.js实现视频监控直播和点播功能。相关推荐

最新文章

热门文章