<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8" />
|
<title>WASM TEST</title>
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
<meta name="apple-touch-fullscreen" content="yes" />
|
<meta name="format-detection" content="telephone=no, email=no" />
|
<link rel="stylesheet" href="styles/style.css" />
|
</head>
|
<body>
|
<div class="container" id="videoPlayer">
|
<div class="sideBar">
|
<span class="no-padding">
|
<img
|
src="img/home.png"
|
class="left"
|
id="btnHome"
|
title="Visit My Homepage"
|
onclick="window.open('https://blog.csdn.net/sonysuqin')"
|
/>
|
</span>
|
<div id="input">
|
<select id="protocol" onchange="onSelectProto()">
|
<option value="h265_high">h265_high</option>
|
<option value="basicH265">h265_basic</option>
|
<option value="basicH264">h264</option>
|
<option value="h265_stream">h265_stream</option>
|
<option value="h264_stream">h264_stream</option>
|
</select>
|
<input type="text" id="inputUrl" style="width:300px" />
|
</div>
|
</div>
|
<div class="canvasDiv">
|
<div class="loadEffect" id="loading" style="display:none;">
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
<span></span>
|
</div>
|
<canvas id="playCanvas" width="852" height="480"></canvas>
|
</div>
|
<div class="sideBar">
|
<span class="no-padding">
|
<img
|
src="img/play.png"
|
class="left"
|
id="btnPlayVideo"
|
onclick="OnBnClickedPlayVideo()"
|
/>
|
</span>
|
<span class="no-padding" style=" padding-left:5px;">
|
<img
|
src="img/stop.png"
|
class="left"
|
id="btnStopVideo"
|
onclick="OnBnClickedStopVideo()"
|
/>
|
</span>
|
<span class="track-padding"></span>
|
<span class="no-padding">
|
<input id="timeTrack" type="range" value="0" />
|
</span>
|
<span class="no-padding" style=" padding-left:10px;">
|
<label id="timeLabel">00:00:00/00:00:00</label>
|
</span>
|
<span class="no-padding right">
|
<img
|
src="img/fullscreen.png"
|
class="right"
|
id="btnFullscreen"
|
onclick="OnBnClickedFullscreen()"
|
/>
|
</span>
|
</div>
|
</div>
|
|
<script type="text/javascript" src="pcm-player.js"></script>
|
<script type="text/javascript" src="webgl.js"></script>
|
<script type="text/javascript" src="player.js"></script>
|
|
<script type="text/javascript">
|
var defaultProtos = {
|
h265_high: { url: 'video/h265_high.mp4', stream: false },
|
basicH265: { url: 'video/smart-ai-h265.mp4', stream: false },
|
basicH264: { url: 'video/smart-ai-h264.mp4', stream: false },
|
h265_stream: { url: 'h265', stream: true },
|
h264_stream: { url: 'h264', stream: true },
|
}
|
document.getElementById('inputUrl').value =
|
defaultProtos['h265_high']['url']
|
|
self.PlayObj = new Player()
|
|
function OnBnClickedPlayVideo() {
|
var button = document.getElementById('btnPlayVideo')
|
if (self.PlayObj.hPlayer == 0 || self.PlayObj.PlayOrPause == 0)
|
button.src = 'img/pause.png'
|
else button.src = 'img/play.png'
|
|
if (self.PlayObj.hPlayer == 0) {
|
var protoList = document.getElementById('protocol')
|
self.PlayObj.play(
|
document.getElementById('inputUrl').value,
|
document.getElementById('playCanvas'),
|
defaultProtos[protoList.options[protoList.selectedIndex].value]
|
.stream,
|
document.getElementById('timeTrack'),
|
document.getElementById('timeLabel')
|
)
|
} else if (self.PlayObj.PlayOrPause == 0) self.PlayObj.resume()
|
else self.PlayObj.pause()
|
}
|
|
function OnBnClickedStopVideo() {
|
if (self.PlayObj.hPlayer == 0) return
|
|
var button = document.getElementById('btnPlayVideo')
|
button.value = 'Play'
|
button.src = 'img/play.png'
|
|
self.PlayObj.stop()
|
}
|
|
function OnBnClickedFullscreen() {
|
self.PlayObj.fullscreen()
|
}
|
|
function onSelectProto() {
|
var protoList = document.getElementById('protocol')
|
var proto = protoList.options[protoList.selectedIndex].value
|
var protoObj = defaultProtos[proto]
|
var inputUrl = document.getElementById('inputUrl')
|
inputUrl.value = protoObj['url']
|
}
|
</script>
|
</body>
|
</html>
|
