获取视频流播放

项目中遇到的小视频回放的问题,客户需要查看视频设备某一段时间的视频

获取视频是其他平台提供的接口,地址类似:http://10.231.20.42:8080/v4/clips/bweed—16-_340c5d5779a1/data

播放视频使用的是video.js

1、引入

<link href="./videojs/video-js.css" rel="stylesheet" type="text/css">
<script src="jquery-3.0.0.min.js"></script>
<script src="./videojs/video.js"></script>
<script src="./videojs/videojs-contrib-hlsjs.min.js"></script>

2、html

<div class="video">
	 <input id="url" type="text" placeholder="请输入回放小视频地址" />
	  <input id="clear" type="button" value="清空">
	  <input id="play" type="button" value="播放">
	  <video id="example_video" controls class=" video-js vjs-default-skin" width="640" height="480">
	  </video>
</div>

3、js

var player = null;
$(document).ready(function () {
    var originUrl = "http://10.231.20.42:8080/v4/clips/bweed---16-_340c5d5779a1/data"
    var playUrl = formatUrl(originUrl)
    player = videojs('example_video');
    player.src({
        src: playUrl,
        type: 'application/x-mpegURL'
    });
});
$('#play').click(function () {
   var url = $('#url').val();
   console.log(url)
   var playUrl = formatUrl(url)
   player.src({
       src: playUrl,
       type: 'application/x-mpegURL'
   });
   player.play()
})
function formatUrl(originUrl) {
   return URL.createObjectURL(
       new Blob(
           ["#EXTM3U\n" + "#EXTINF:0,\n" + originUrl + "\n" + "#EXT-X-ENDLIST"], {
               type: "application/x-mpegURL"
           }
       )
   );
};

遇到的特殊情况:视频地址是http,项目上线使用https,协议不对等导致视频播放不了

解决:向后台提交视频地址,有后台获取并转流

<video id="faceAlarmVideo" controls class=" video-js vjs-default-skin" style="width:100%;height:100%"></video>
let Base64 = require('js-base64').Base64;
let url = Base64.encode(this.data.captureVideoUrl)
var captureVideo = 'https://172.31.4.248/sc1902/warning/getCaptureVideo?url='+url;

var playUrl = this.formatUrl(captureVideo)
videojs("faceAlarmVideo", {}, function() {
	var myPlayer = this;
	$("#faceAlarmVideo").attr("src", playUrl);
	myPlayer.src({
		src: playUrl,
		type: 'application/x-mpegURL'
	});
	myPlayer.load(playUrl);
	myPlayer.play();
});



formatUrl(originUrl) {
	return URL.createObjectURL(
		new Blob(
			["#EXTM3U\n" + "#EXTINF:0,\n" + originUrl + "\n" + "#EXT-X-ENDLIST"], {
				type: "application/x-mpegURL"
			}
		)
	);
},
发布了60 篇原创文章 · 获赞 7 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览