需要在悬停或播放时显示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; 在平台/浏览器特定外观方面,这也可能是一个挑战.但另一方面它会给你粮食控制.

另一种方法是查看一些库,这些库将视频元素包装到自定义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>