HTML5 video是在网页上播放视频的一种标准。它可以使用<video>标签将视频嵌入到网页中，并使用默认的控件来控制视频的播放。但是，有些时候我们可能需要通过编程方式来控制视频的控件的显示和隐藏，以便更好地适应我们的界面需求。
显示/隐藏控件
要通过编程方式显示/隐藏HTML5 video的控件，我们可以使用video元素的controls属性。该属性用于指定是否显示视频控件。默认情况下，该属性被设置为true，即视频控件始终可见。
要通过编程方式隐藏控件，在Javascript代码中，我们可以将controls属性设置为false。例如，以下代码片段演示了如何通过按钮单击事件来切换视频控件的可见性：
-- -------------------- ---- ------- ------ ------------ --------- ------- ----------------- ----------------- -------- ------- --------------------------------- ----------------- -------- -------- ---------------- - --- ----- - ----------------------------------- -------------- - ---------------- - ---------
在上面的示例中，我们首先在<video>元素中定义了一个包含视频源的<source>元素。我们还添加了一个id为“myVideo”的视频元素和一个按钮元素，按钮元素用于触发切换视频控件可见性的JavaScript函数。
在JavaScript函数中，我们获取了视频元素，并将其controls属性设置为其当前值的相反值。这意味着如果控件目前是可见的，则通过单击按钮将其设置为不可见，反之亦然。
指定显示/隐藏控件的时间
除了通过编程方式切换HTML5 video控件的可见性之外，我们还可以指定何时显示或隐藏控件。例如，在用户交互期间可能需要显示控件，或者在视频被自动播放时可能需要隐藏控件。
要以编程方式控制控件的显示和隐藏，我们可以使用video元素的onmouseover和onmouseout事件。例如，以下代码片段演示了如何在鼠标移动到视频上时显示控件，在鼠标离开时隐藏控件：
-- -------------------- ---- ------- ------ ------------ -------- ---------------------------- ---------------------------- ------- ----------------- ----------------- -------- -------- -------- -------------- - --- ----- - ----------------------------------- -------------- - ----- - -------- -------------- - --- ----- - ----------------------------------- -------------- - ------ - ---------
在上面的示例中，我们添加了onmouseover和onmouseout事件处理程序来调用showControls()和hideControls()函数。在showControls()函数中，我们将controls属性设置为true，以便在鼠标移动到视频上时显示控件。在hideControls()函数中，我们将controls属性设置为false，以便在鼠标离开视频时隐藏控件。
结论
HTML5 video元素是在网页上播放视频的强大工具，可以使用默认的控件来控制视频的播放。但是，在某些情况下，可能需要通过编程方式显示/隐藏这些控件，或者指定何时显示或隐藏它们。以上代码示例演示了如何实现这些功能，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26324