<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="video-js-cdn.css">
<link rel="stylesheet" href="video.css">
<style>
p{
text-align: justify;
height: 20px;
overflow: hidden;
}
p:after{
display: inline-block;
content:'';
overflow: hidden;
width: 100%;
height: 0;
}
</style>
</head>
<body onload="playVideo()">
<hr>
<!--<div>-->
<!--<select id="videoType">-->
<!--<option value="HLS" selected>HLS</option>-->
<!--<option value="FLV">FLV</option>-->
<!--</select>-->
<!--url:<input id="url" type="text"> <button type="button" id="play" onclick="playVideo()">播放</button>-->
<!--</div>-->
<video id="myVideo" width=600 height=500 class="video-js vjs-default-skin" controls preload="auto" autoplay="true"></video>
<script src="jquery-1.11.3.js"></script>
<script src="video.min.js"></script>
<script src="videojs-contrib-hls.js"></script>
<script>
/*
如何在浏览器观看视频
> 首先确定要观看视频的通道号。常用方式有两种
>
> a) 如果能访问视频云的管理界面，在`设备`页面通过`导出`按钮，得到通道列表。
>
> b) 通过 **基础服务->设备管理->获取设备树** 接口获得通道列表。
>
> c) 通过 **视频服务->实时监视->获取实时监视URI** 接口获得实时监视地址，送浏览器播放。
*/
videojs.options.flash.swf="./video-js.swf";
$(document).ready(function () {
var url = window.opener.document.getElementById("videoUrl").value;
url = url.substring(1, url.length - 1);
$("#url").val(url);
$("#videoType").val("HLS");
});
function playVideo(){
var url = window.opener.document.getElementById("videoUrl").value;
url = url.substring(1, url.length - 1);
$("#url").val(url);
$("#videoType").val("HLS");
var videoType = 'application/x-mpegURL';
// if ('FLV' == $('#videoType').val()) {
// videoType = 'video/x-flv';
// }
var myPlayer = videojs('myVideo',{
bigPlayButton:false
});
console.log($("#url").val());
console.log(videoType);
myPlayer.src({
type: videoType,
src: url
});
// window.parent.document.getElementById("videoUrl").value="";
}
</script>
</body>
</html>
