103 lines
6.4 KiB
Cheetah
103 lines
6.4 KiB
Cheetah
{{template "header" .}}
|
||
<div class="container-fluid flex justify-content">
|
||
<div class="main">
|
||
{{if eq .Video.Status 200}}
|
||
<h6 style="margin-top: 20px;margin-bottom: 10px;">正在播放
|
||
<svg class="icon" viewBox="0 0 1024 1024" width="15" height="21">
|
||
<path
|
||
d="M607.698947 992.000352c0-7.399919-2.599971-14.899836-7.799914-20.89977l-360.79603-416.99541c-20.999769-23.999736-20.999769-60.299336 0-84.299073l0.099999-0.099999L599.899033 52.910688c11.599872-13.399853 10.099889-33.59963-3.299964-45.099504-13.399853-11.599872-33.59963-10.099889-45.099504 3.299964L190.903534 427.806562c-20.399775 23.299744-31.599652 53.199414-31.599652 84.199073s11.199877 60.89933 31.599652 84.199073l360.596031 416.695414c11.599872 13.399853 31.79965 14.799837 45.099504 3.299964 7.399919-6.299931 11.099878-15.199833 11.099878-24.199734z"
|
||
p-id="6425"></path>
|
||
<path
|
||
d="M864.696118 992.000352c0-7.399919-2.599971-14.899836-7.799914-20.89977l-360.796029-416.99541c-20.999769-23.999736-20.999769-60.299336 0-84.299073l0.099999-0.099999L856.896204 52.910688c11.599872-13.399853 10.099889-33.59963-3.299964-45.099504-13.399853-11.599872-33.59963-10.099889-45.099503 3.299964L447.900705 427.806562c-20.399775 23.299744-31.599652 53.199414-31.599652 84.199073s11.199877 60.89933 31.599652 84.199073l360.596032 416.695414c11.599872 13.399853 31.79965 14.799837 45.099503 3.299964 7.399919-6.299931 11.099878-15.199833 11.099878-24.199734z"
|
||
p-id="6426"></path>
|
||
</svg>{{.Video.Title}}<svg class="icon" viewBox="0 0 1024 1024" width="15" height="21">
|
||
<path
|
||
d="M416.301053 992.000352c0-7.399919 2.599971-14.899836 7.799914-20.89977l360.79603-416.895412c20.999769-23.999736 20.999769-60.299336 0-84.299072l-0.099999-0.099999L424.100967 52.910688c-11.599872-13.399853-10.099889-33.59963 3.299964-45.099504 13.399853-11.599872 33.59963-10.099889 45.099504 3.299964l360.596031 416.695414c20.399775 23.299744 31.599652 53.199414 31.599652 84.199073s-11.199877 60.89933-31.599652 84.199073l-360.596031 416.695414c-11.599872 13.399853-31.79965 14.799837-45.099504 3.299964-7.399919-6.299931-11.099878-15.199833-11.099878-24.199734z"
|
||
p-id="6274"></path>
|
||
<path
|
||
d="M159.303882 992.000352c0-7.399919 2.599971-14.899836 7.799914-20.89977l360.796029-416.895412c20.999769-23.999736 20.999769-60.299336 0-84.299072l-0.099999-0.099999L167.103796 52.910688c-11.599872-13.399853-10.099889-33.59963 3.299964-45.099504 13.399853-11.599872 33.59963-10.099889 45.099503 3.299964l360.596032 416.695414c20.399775 23.299744 31.599652 53.199414 31.599652 84.199073s-11.199877 60.89933-31.599652 84.199073l-360.596032 416.695414c-11.599872 13.399853-31.79965 14.799837-45.099503 3.299964-7.399919-6.299931-11.099878-15.199833-11.099878-24.199734z"
|
||
p-id="6275"></path>
|
||
</svg>
|
||
</h6>
|
||
<video id="video" controls width="100%" style="background-color: #000000;"></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 style="width: 100%; height: 600px;background-color: antiquewhite;"></div>
|
||
{{else}}
|
||
<div class="">该视频目前还不能播放!</div>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{define "js"}}
|
||
<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('{{.Video.PlayLink}}');
|
||
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 = '{{.Video.PlayLink}}';
|
||
video.addEventListener('loadedmetadata', function () {
|
||
//video.play();
|
||
});
|
||
}
|
||
// reurn false 禁止函数内部执行其他的事件或者方法
|
||
var vol = 0.1; // 1代表100%音量，每次增减0.1
|
||
var time = 10; // 单位秒，每次增减10秒
|
||
// 键盘事件
|
||
document.onkeyup = function (event) {
|
||
const nodeName = event.target.nodeName;
|
||
if (nodeName && (nodeName.toUpperCase() === "INPUT" || nodeName.toUpperCase() === "TEXTAREA")) { return; }
|
||
// 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) {
|
||
// if (e.preventDefault) {
|
||
// e.preventDefault();
|
||
// } else {
|
||
// window.event.returnValue = false;
|
||
// }
|
||
// event.preventDefault();
|
||
// event.returnValue = false;
|
||
// 按空格键 判断当前是否暂停
|
||
// alert(1)
|
||
video.paused === true ? video.play() : video.pause();
|
||
return false;
|
||
}
|
||
}
|
||
</script>
|
||
{{end}}
|
||
{{template "footer" .}} |