获取视频流播放

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

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

播放视频使用的是video.js

1、引入

2、html

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，协议不对等导致视频播放不了

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

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"
			}
		)
	);
},