HTML 5 视频播放状态覆盖

Posted 2023-05-07

【中文标题】HTML 5 视频播放状态覆盖

【英文标题】：HTML 5 Video playstate overlay

【发布时间】：2014-07-09 00:05:32

【问题描述】：

我对html5有特殊要求<video>，希望大家帮帮我。

是否可以在 html5 <video> object 上方添加<div>、<p> 或其他内容？ 加上触发Video的PlayState并隐藏，在视频停止后显示？

这是海报：

例如：

<video    poster="img/thumb.png" controls>
   <source src="TestVideo1.mp4" type="video/mp4">
 Get a new Browser my friend
 <h1>Title</h1>
 <p>Some Description</p>
 </video> 

应该是这样的

有没有办法做到这一点？

谢谢

注意：

我已阅读此帖子 Overlaying a DIV On Top Of HTML 5 Video，但没有帮助。

图片：

海报

http://i.stack.imgur.com/vA1zn.png

应该是这样的：

http://i.stack.imgur.com/qsZaI.png

【问题讨论】：

如果您准备使用 javascript，请查看 videojs.com，它可以满足您的需求并在不同浏览器之间保持相同的用户体验

谢谢，但我想在播放器上添加一个文本，例如。标题和说明。播放视频时它必须消失。

【参考方案1】：

你将不得不结合使用 canvas 标签和 javascript 来获得你想要的东西。

尝试先看看这两篇文章：

video + canvas = magic

Using CSS3 and Jquery to create a custom HTML5 Player