直播播放案例
<!DOCTYPE html>
<html>
<head>
<title>监控测试</title>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/swfobject.js"></script>
</head>
<body>
<!--移动端-->
<!-- <video class="vjs-tech" width="100%" height="100%"
controls="controls" autoplay="autoplay"
x-webkit-airplay="true" x5-video-player-fullscreen="true"
preload="auto" playsinline="true" webkit-playsinline
x5-video-player-typ="h5">
<source type="application/x-mpegURL" src="http://86/live/cameraid/1000006%240/substream/1.m3u8">
</video> -->
<!--PC-->
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<video id="video" style=" width: 640px;height:480px;"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http:///live/cameraid/1000006%240/substream/1.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
<!--PC-->
<!--
<div id="playercontainer"></div>
<script type="text/javascript" src="http://resource.bcevod.com/player/cyberplayer.js"></script>
<script type="text/javascript">
var player = cyberplayer("playercontainer").setup({
width: 640,
height: 480,
file: "/hls/aktv2/aktv2_live.m3u8",
image: "",
autostart: true,
stretching: "uniform",
repeat: false,
volume: 100,
controls: true,
ak: 'cc94de6803904f2ca7159eedeaced55d'
});
-->
</body>
</html
