<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App</title>
<script type="module" crossorigin src="./video-play.js"></script>
</head>
<style>
.player-box{
position: relative;
}
.player-box-item{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 999;
}
</style>
<body>
<!-- <video-play
muted control auto-play
webrtc="http://23.237.196.99:680/index/api/webrtc?app=live&stream=test&type=play"
> -->
<div id="player"></div>
<!-- http://207.148.116.179/play/index.html?app=live&type=webrtc&stream=CCTV5HD -->
<!-- http://23.237.196.98:680/live/ CCTV5HD -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
console.log('Hello world');
</script> -->
</body>
<script>
window.onload = () => {
const playerEle = document.getElementById('player')
let searchStr = location.search.split('?')
if (searchStr.length == 2) {
let listStr = searchStr[1].split('&')
let playStream = ''
let playType = ''
let playApp = ''
listStr.forEach(item => {
let s = item.split('=')
if (s[0] == 'stream' && s.length == 2) {
playStream = s[1]
}
if (s[0] == 'type' && s.length == 2) {
playType = s[1]
}
if (s[0] == 'app' && s.length == 2) {
playApp = s[1]
}
});
if (playType == '') {
if (hasRTCPeerConnection()) {
playType = "webrtc"
} else {
if (hasMSE()) {
playType = "flv"
} else {
playType = "hls"
}
}
} else {
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
playType = "hls"
}
}
if (playStream=="")return
let playStreamList = playStream.split(',')
if (playStreamList.length>0) {
for (let index = 0; index < playStreamList.length; index++) {
const playerDom = document.createElement('div')
playerDom.classList.add("player-box")
const element = playStreamList[index];
if (playType == 'flv') {
playerDom.innerHTML = `<video-play muted auto-play flv="${location.origin}/live/${element}.live.flv"></video-play> <div class="player-box-item"></div>`
}
if (playType == 'hls') {
playerDom.innerHTML = `<video-play muted auto-play hls="${location.origin}/live/${element}/hls.m3u8"></video-play> <div class="player-box-item"></div>`
}
if (playType == 'webrtc') {
console.log(`${location.origin}/index/api/webrtc?app=${playApp}&stream=${element}&type=play`);
playerDom.innerHTML = `<video-play muted auto-play webrtc="${location.origin}/index/api/webrtc?app=${playApp}&stream=${element}&type=play"></video-play> <div class="player-box-item"></div>`
// playerEle.innerHTML = `<video-play muted control auto-play webrtc="${location.origin}/index/api/whep?app=${playApp}&stream=${playStream}"></video-play>`
}
playerEle.appendChild(playerDom)
}
}
}
function hasRTCPeerConnection() {
window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection || window.msRTCPeerConnection;
return !!window.RTCPeerConnection;
}
function hasMSE() {
return window.MediaSource && window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
}
</script>
</html>