@easydarwin/easyplayer
Version:
hls, flv and websocket player h265
92 lines (83 loc) • 2.46 kB
HTML
<html>
<head>
<title>
EasyPlayer
</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
</head>
<style>
body {
margin: 0;
padding: 0;
}
.box {
margin-top: 40px;
width: 800px;
height: 400px;
margin: auto;
}
</style>
<body>
<div id="playerContainer">
<div class="box">
<easy-player
hidden-right-menu="false"
id="player"
muted="true"
autoplay="true"
debug="true"
video-title="视频测试标题"
live="false"
has-audio="true"
is-trans-coding="true"
fullscreen="true"
record-file-name="test-111"
/>
</div>
</div>
<div style="padding: 8px;z-index: 999">
<div style="padding: 5px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;flex:1">
<div>
流地址：
<input style="width: 800px" id="streamUrl"
value="http://106.55.188.61:10086/live/stream_2.flv"/>
</div>
<div>
<button id="btn">播放</button>
</div>
</div>
</div>
<!--<script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>-->
<!--<script>-->
<!-- // VConsole 默认会挂载到 `window.VConsole` 上-->
<!-- var vConsole = new window.VConsole();-->
<!--</script>-->
<script>
let vuePlayer = null
let isFirstPlay = true
const btn = document.getElementById('btn')
const playerEle = document.getElementById('player')
btn.onclick = () => {
let streamUrl = document.getElementById('streamUrl').value || null
if (streamUrl === null) playerEle.setAttribute('video-url', 'http://106.55.188.61:10086/live/stream_2.flv')
else playerEle.setAttribute('video-url', streamUrl);
}
window.onload = async() => {
playerEle.addEventListener("waiting", (message) => {
console.log('waiting', message);
})
playerEle.addEventListener("error", (message) => {
console.log('error', message);
})
playerEle.addEventListener("ended", () => {
console.log('ended');
})
}
</script>
<script type="text/javascript" src="EasyPlayer-element.min.js"></script></body>
</html>