在视频播放开始时隐藏 HTML5 视频控件的自动可见性，但保留所有其他默认控件行为

Posted 2023-03-15

【中文标题】在视频播放开始时隐藏 HTML5 视频控件的自动可见性，但保留所有其他默认控件行为

【英文标题】：Hide automatic visability of HTML5 video controls at beginning of video play but maintain all other default control behaviour

【发布时间】：2014-03-04 19:52:42

【问题描述】：

我有一个高分辨率 (500 x 403) 的“视频介绍”，客户希望我将其添加到他们提供给我的“主要”视频的开头。主视频是低分辨率 (200 x 150)。

我可以将简介设为低分辨率并添加它（客户不喜欢），或者我可以将主视频的分辨率加倍并添加它（这会增加下载和播放电影所需的带宽。）也不是最佳的，因为这注定是移动的。

我要使用第三种解决方案。我正在播放高分辨率的“介绍视频”，当播放结束时，我会自动加载主视频，并通过创建一个包含介绍和主视频的播放列表在介绍后面播放。

我遇到的问题是 html 5 视频的默认控制器行为是在视频的前 2 或 3 秒内可见，然后淡出。这对于播放列表中的第一个视频很好，但是我希望控件不会在后续视频的开头显示。介绍只有 6 秒，出现和消失的控件看起来很乱，我希望两个视频都显示为一个。

我尝试过使用“videoPlayer.removeAttribute("controls");"但是，这会完全杀死控件，因此，如果用户稍后点击视频以故意将控件备份，则不会发生任何事情。理想情况下，我希望保留所有默认行为，但在视频开头显示控件除外。

我已经看到一些试图修改 video.js 以实现这种性质的冗长尝试，但理想情况下我可以对本机功能做一些事情来实现这一点。

有什么想法吗？

原码：

<script type="text/javascript">

$(document).ready(function()
    var xx=1;
    var nextVideo = new Array();
        nextVideo[0] = "Content/videos/Logo_Animate_537.mp4";
        nextVideo[1] = "Content/videos/Main.mp4";
        nextVideo[2] = "Content/videos/Logo_Animate_537.mp4";

    $("#videoPlayer").bind('ended', function()
        if(xx>nextVideo.length-1)
            videoPlayer.setAttribute("controls","controls");
            videoPlayer.pause();
            xx=1;
         else 
            videoPlayer.removeAttribute("controls");
            videoPlayer.src = nextVideo[xx];
            videoPlayer.play();
            xx++;
        
    );

    //+++++++++++++++++++ This section was added as the solution ++++++++++++++
    $("#videoPlayer").on('click touchstart', function () 
        videoPlayer.setAttribute("controls","controls");                                           
    );
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

);

</script>


<video id="videoPlayer"   controls poster="images/main.jpg">
    <source src="Content/videos/Logo_Animate_537.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

【参考方案1】：

您在这里似乎有两个选择。第一个是根据需要简单地删除和替换控件属性。这将是最简单的解决方案，因为

element.setAttribute('controls', '')

会在您需要时简单地将控件放回原处。另一种选择是根本不使用浏览器控件，定义您自己的自定义控件，并根据需要隐藏或显示它们。