Question

我已经定制了标准HTML5视频播放器并将其粘贴到网站上。 Videoplayer有一个控制我的视频播放器的热键。问题是：当我点击例如带有搜索查询的文本字段时，当我尝试键入查询时，它会继续控制我的播放器。

负责视频的HTML部分之一：

<div id="video_player_box">
   <video controls="controls" id="video"  poster="movies/photo/<?php echo  $photovideo;?>">
      <source src="movies/<?php echo  $way .= $type;  ?>" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   </video>
   <div id="video_controls_bar">
      <div class="wrap">
         <input id="seekslider" type="range"  class="range"  min="0" max="100" value="0" step="1" oninput="vidSeek(this.value)" onchange="vidSeek(this.value)">
      </div>
      <button id="playpausebutton"></button>   
      <button id="stopbutton"></button>
      <button id="mutebtn"></button>      
      <input id="volumeslider" type="range" min="0" max="100" value="100" step="1" oninput="setvolume(this.value)" onchange="setvolume(this.value)">
      <span id="curtimetext">00:00 </span><span id="separator"> / </span><span id="durtimetext">00:00</span>   
      <button id="fullscreenbtn"></button>
      <div class="dropdownvideo">
         <button id="qualitybtn" onclick="QualityMenu()" class="dropbtn"></button>
         <div id="Dropdown" class="dropdown-content-video">
            <a id="HQ" href="#">HQ</a>
            <a id="MQ" href="#">MQ</a>
            <a id="LQ" href="#">LQ</a>
         </div>
      </div>
   </div>
</div>

JS（小块，认为另一个并不重要）：

var videoBox = document.getElementById("video_player_box");
document.addEventListener('click', function(event) {
    var isClickInside = video.contains(event.target);

    if (!isClickInside) {
        videoBox.blur();
    } else {
        videoBox.focus();
    }
});

Answer 1

如果视频元素具有controls属性（即Firefox应使用自己的控制菜单），则可以使用Tab来聚焦视频播放器。当它具有焦点时，您可以使用键盘控件。

https://superuser.com/questions/820961/how-can-i-play-a-html5-or-flash-video-with-keyboard-shortcuts-on-a-system-withou

无法从我的HTML5视频播放器中失去焦点

1 个答案: