如何使用图片构建自定义视频播放器?

时间:2016-12-02 03:32:50

标签: html css video

我需要在网站上嵌入视频,但我希望视频在此图片的空白部分内播放: iphone_wireframe

我该怎么做?我会将图像放在视频后面吗?或者有更好的方法吗?

我到处搜索过,所有教程都告诉我如何用按钮和控件制作播放器。我不需要那个。

我只想展示5秒剪辑来演示我正在制作的应用程序的一些互动,我不想制作GIF,因为质量很差,除非我想要一个非常慢的网页。

在Wista上,我可以将视频设置为自动播放和循环,这样我真正需要做的就是将其嵌入到图像中。

我是新手,所以我不知道我在做什么。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

您有两种选择:

  • 嵌入
  • IFRAME

我更喜欢后者。 w3schools是一个很好的网站,可以帮助iframe。只需要正确设置宽度。我可以提供更多帮助,但我需要一个代码示例。

现在我考虑一下。你可以尝试类似的东西(不要运行代码片段,只需展开它):

<div id="frame" height="1000px" style="background-image:url(filepath from html/url);">
  <iframe src="*link to video*" style="posistion:absolute;height:1000px;"></iframe>
</div>

希望这很有用。