js操控video

This commit is contained in:
kenneth 2023-11-29 10:02:06 +00:00
parent d07d13151a
commit 1d15401c9c

View File

@ -6,7 +6,9 @@
<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>
<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">
@ -19,20 +21,49 @@
<script src="/statics/js/hls.min.js"></script>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
if (Hls.isSupported()) {
console.log("supported");
var hls = new Hls();
hls.loadSource('{{.Url}}');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
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.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" .}}