当前位置: 首页 > 面试题库 >

在HTML 5视频上叠加DIV

邬博涉
2023-03-14
问题内容

我需要在包含HTML 5视频的div的div顶部放置一个叠加层。在下面的示例中,重叠div的ID为“ video_overlays”。请参见下面的示例:

<div id="video_box">

  <div id="video_overlays"></div>

  <div>

    <video id="player" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" onclick="this.play();">Your browser does not support this streaming content.</video>

  </div>

</div>

问题答案:

随你去,我希望这会有所帮助

这也是CSS

#video_box{
    float:left;
}
#video_overlays {
position:absolute;
float:left;
    width:640px;
    min-height:370px;
    background-color:#000;
    z-index:300000;
}


 类似资料:
  • 我想在画布上画一段视频。为了实现这一点,我在Javascript中捕获onMouseDown和onMouseUp事件,以获得每个事件的x和y坐标(我需要在画布中设置视频的位置、宽度和高度)。 因此,每次我在画布上绘制视频时,我创建的上一个视频都应该停止,并且必须播放新的视频。两个问题: 1)视频不播放(功能只画第一帧),但他的音频可以 2) 如何停止以前绘制的视频? 演示:http://jsfid

  • function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest

  • 我试图在基于bootstrap 2.2.2的设计中嵌入HTML5视频,但它在Firefox上不起作用,但它在chrome上运行良好,但在Firefox上说我尝试将这些添加到.htaccess文件中,并将其上传到根目录中,但这也没有帮助。 null 注意:我看了前面关于stackoverflow的问题,但没有运气,而且我没有apache配置文件来允许视频样式,因为我是在共享主机上。

  • 问题内容: 我想更新HTML5视频元素中的source标签,以便单击按钮时,无论播放什么内容,都将切换到新视频。 我有一个Clip组件,它返回一个HTML5视频元素,其源URL通过props提供。 我还有一个Movie组件,其中包含多个URL,每个URL对应于电影的一部分。它还包含一个position属性,它通过记住当前正在播放的部分来充当迭代器。 电影组件呈现一个Clip组件和一个“ Next”

  • 问题内容: 关于YouTube API博客,他们正在试验新的 HTML5 视频播放器。 显然,要使用html5播放视频,您必须使用iframe嵌入代码: 但是,如果客户端尚未加入HTML5试用版,则即使客户端的浏览器支持HTML5视频,播放器也会自动退回到Flash播放器中。 如果用户尚未参与HTML5试用版,即使浏览器支持,如何强制HTML5视频播放? 否则,如何禁用Flash后备广告? 问题答

  • 问题内容: 我需要HTML5视频才能从某个位置开始。假设是从50秒开始的时间。 我试过了,但是没有按预期工作。我做错什么了吗? 这是代码: 页面加载时,它只是从头开始播放。但是,如果我在播放过程中(如一段时间后)称呼它,则效果很好。我有什么想念的吗? 问题答案: 您必须等到浏览器知道视频的时长,然后才能搜索特定的时间。因此,我认为您想等待“ loadedmetadata”事件,如下所示: