mediahls/web/templates/video/play.html.tmpl
2023-11-29 10:02:06 +00:00

69 lines
3.0 KiB
Cheetah
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{template "header" .}}
<div class="container-fluid flex justify-content">
<div class="main">
<h6 style="margin-top: 20px;margin-bottom: 10px;">正在播放 &lt;&lt;Git - Div Rhino&gt;&gt;</h6>
<video id="video" controls width="100%"></video>
<div class="tip-box">
<div class="tip-icon">
<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="InfoOutlinedIcon">
<path
d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z">
</path>
</svg>
</div>
<div class="tip-info">
<p>空格键播放/暂停,上下箭头调整音量,左右箭头调整播放进度。播放器顶部停止按钮可以关闭播放器,回到详情页面。</p>
<p>如果播放遇到问题,请尝试切换播放源。</p>
</div>
</div>
</div>
</div>
<script src="/statics/js/hls.min.js"></script>
<script>
var video = document.getElementById('video');
if (Hls.isSupported()) {
console.log("supported");
var hls = new Hls();
hls.loadSource('{{.Url}}');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
//video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
console.log("no supported");
video.src = '{{.Url}}';
video.addEventListener('loadedmetadata', function () {
//video.play();
});
}
// reurn false 禁止函数内部执行其他的事件或者方法
var vol = 0.1; // 1代表100%音量每次增减0.1
var time = 10; // 单位秒每次增减10秒
document.onkeyup = function (event) {//键盘事件
// console.log("keyCode:" + event.keyCode);
var e = event || window.event || arguments.callee.caller.arguments[0];
// 鼠标上下键控制视频音量
if (e && e.keyCode === 38) {
// 按 向上键
video.volume !== 1 ? video.volume += vol : 1;
return false;
} else if (e && e.keyCode === 40) {
// 按 向下键
video.volume !== 0 ? video.volume -= vol : 1;
return false;
} else if (e && e.keyCode === 37) {
// 按 向左键
video.currentTime !== 0 ? video.currentTime -= time : 1;
return false;
} else if (e && e.keyCode === 39) {
// 按 向右键
video.volume !== video.duration ? video.currentTime += time : 1;
return false;
} else if (e && e.keyCode === 32) {
// 按空格键 判断当前是否暂停
video.paused === true ? video.play() : video.pause();
return false;
}
}
</script>
{{template "footer" .}}