JavaScript-全屏时阻止html5视频标签中的默认设置 [英] JavaScript - Prevent default in html5 video tag while fullscreen

问题描述

我的网站上有一个视频播放器，希望将用户单击向左或向右箭头时的默认搜索时间更改为10秒(例如netflix或youtube).

使用 preventDefault()和 stopImmediatePropagation()的组合，我设法达到了预期的效果，但是当用户进入全屏模式时，默认事件仍会通过(以及我的代码).

  document.onkeydown = function(event){开关(event.keyCode){案例37:event.preventDefault();event.stopImmediatePropagation();vid.currentTime = vid.currentTime-10;休息;案例39:event.preventDefault();event.stopImmediatePropagation();vid.currentTime = vid.currentTime + 10;休息;}} 

我在其他文章上读到，大多数浏览器不允许阻塞转义以使其全屏显示，因为它具有侵入性，但这只会影响向左和向右箭头，以任何方式更改默认搜索时间?

在Chrome上进行了测试.

解决方案

现在，我创建了一个小技巧来解决这个问题，在当前视频时间每200ms进行一次变量更新，然后按向左/向右键进行调整基于该变量的时间，而不是真实的视频时间.我的理由是，由于我的代码是在默认浏览器操作之后调用的，因此该变量将包含浏览器更改之前的视频时间.

 //用于保存当前视频时间的变量+-200msvar curTime;var vid = document.getElementById(电影播放器​​");//每200ms更新一次视频时间变量window.setInterval(function(){curTime = document.getElementById(电影播放器​​").currentTime;}，200)；//在按键处理程序上document.onkeydown = function(event){开关(event.keyCode){案例37://计算新时间(旧的-10s)var newTime = curTime-10;//使用调整后的时间更新视频时间变量curTime = newTime;//最后将视频时间设置为正确的时间.vid.currentTime = newTime;休息;案例39://计算新时间(旧+ 10秒)var newTime = curTime + 10;//使用调整后的时间更新视频时间变量curTime = newTime;//最后将视频时间设置为正确的时间.vid.currentTime = newTime;休息;}}; 

同样，我认为这很hackhacking，但它确实有效，我唯一需要担心的是偶尔在默认浏览器操作之后但在正确更新视频时间之前更新 curTime 的时间.

如果某人有更好的解决方案，请发布它，并将其标记为正确的解决方案.

在Chrome上进行了测试.

I have a video player on my website and want to change the default seek time when a user clicks left or right arrows to 10 seconds (like netflix or youtube).

Using a combination of preventDefault() and stopImmediatePropagation() I've managed to achieve desired effect however when a user goes fullscreen, default events are still passed through (along with my code).

    document.onkeydown = function(event) {
    switch (event.keyCode) {
        case 37:
            event.preventDefault();
            event.stopImmediatePropagation();
            vid.currentTime = vid.currentTime - 10;
        break;
        case 39:
            event.preventDefault();
            event.stopImmediatePropagation();
            vid.currentTime = vid.currentTime + 10;
        break;
    }
}

I've read on other posts that blocking escape to leave full screen isn't permitted by most browsers because its intrusive, however this is only affecting the left and right arrows, any way to change the default seek time?

Tested on Chrome.

解决方案

For now I created a little hack to get around it, have a variable update every 200ms with the current video time, and when left/right key is pressed adjust the time based off that variable instead of the true video time. My reasoning is that since my code is called after the default browser action, this variable will contain the video time before the browser changed it.

// Variable to hold the current video time +- 200ms
var curTime;
var vid = document.getElementById("movie-player");

//Update video time variable every 200ms
window.setInterval(function(){
    curTime = document.getElementById("movie-player").currentTime;
}, 200);

//On Keypress Handler
document.onkeydown = function(event) {
    switch (event.keyCode) {

        case 37:
            // Calculate the new time (old - 10s)
            var newTime = curTime - 10;
            // Update video time variable with the adjusted time
            curTime = newTime;
            // Finally set the video time with the correct one.
            vid.currentTime = newTime;
        break;

        case 39:
            // Calculate the new time (old + 10s)
            var newTime = curTime + 10;
            // Update video time variable with the adjusted time
            curTime = newTime;
            // Finally set the video time with the correct one.
            vid.currentTime = newTime;
        break;
    }
};

Again, I think this is very hackish but it works, the only concern I might have is the occasional time when the curTime updates after the default browser action but before the video time is updated correctly.

If someone has a better solution please post it and Ill mark it as the correct solution.

Tested on Chrome.

这篇关于JavaScript-全屏时阻止html5视频标签中的默认设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！