javascript - 需要在悬停或播放时显示 HTML5 视频控件

Question

我想隐藏页面上多个 HTML5 视频的控件。如果用户将鼠标悬停在视频上，则应显示控件。如果他们点击播放按钮，那么即使他们的鼠标离开视频元素，控件也应该保持可见。

我似乎无法使用以下代码让它工作。任何人都可以发现问题吗？

var $video = $('.video');

$video.on('mouseover', show);
$video.on('mouseleave', hide);

function show() {
    $(this).attr('controls', '');
}

function hide() {
    var isPlaying = false;

    this.onplaying = function() {
        isPlaying = true;
    }

    if (!isPlaying) {
        $(this).removeAttr('controls');
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video class="video">
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>

Answer 1

我们无法真正控制这种行为，因为它是由浏览器在内部管理的。我们所能做的就是指定 controls 属性，浏览器将完成剩下的工作。

例如:在 Firefox 中(编写此代码时为 v59b)，即使设置了 controls 属性，当视频播放时鼠标位于元素外部时，控件也会淡出 - 它们将显示不玩，这与您所追求的相反。当用户将鼠标移出视频元素时，无法强制控件保持可见。

正确处理此跨浏览器并具有确切所需行为的唯一方法是为播放器构建自定义控件 UI。这当然意味着需要更多代码来处理各种事件，以便您可以更新和管理 UI；当涉及平台/浏览器特定外观时，这也可能是一个挑战。但另一方面，它会给你 Cereal 控制。

另一种方法是查看一些将视频元素包装到自定义 UI 控件中的库，看看它们是否允许您强制控件在给定条件下保持可见。参见示例 videojs作为起点。

一个小但不完整的示例(添加功能、事件处理程序、根据需要进行设计):

var $container = $("#video1");
var $video = $container.children("video"), video = $video[0]
var $controls = $container.children(".controls");
var $play = $controls.children("button");

// control visibility
$container.on("mouseover mouseout", function(e) {
  $controls.css("display", e.type === "mouseout" && video.paused ? "none" : "block");
});

// play or pause
$play.on("click", toggle);
$video.on("click", toggle);

function toggle() {
  video[video.paused ? "play" : "pause"]();
}

// todo: cover more events (seeked, error etc.)
$video.on("play pause ended", updateUI);

// update control UI elements (todo: update time/progress etc.)
function updateUI() {
  $play.text(video.paused ? "Play" : "Pause")
}

.container {
  position:relative;
  display:inline-block;
  font-size:0;
  }
.container > .controls {
  position:absolute;
  bottom:0;
  width:100%;
  background:rgba(255,255,255,0.3);
  padding:7px;
  box-sizing:content-box;
  z-index:10000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=video1 class=container>
  <video width=640 muted src="//media.w3.org/2010/05/sintel/trailer.mp4"></video>
  <div class=controls style="display:none">
    <button>Play</button>
  </div>
</div>