HTML5 视频进度滑块 [关闭]

Posted 2023-05-07

【中文标题】HTML5 视频进度滑块 [关闭]

【英文标题】：HTML5 Video progress slider [closed]

【发布时间】：2014-04-02 19:05:50

【问题描述】：

所以我正在尝试为 html5 视频创建进度滑块。所以我在页面上有视频，当你点击播放（无论是通过按钮还是视频本身）时，视频就会开始并更新进度条。我还想在进度条内放置一个图像，并使进度条可点击以跳过视频。任何想法如何使用 javascript 做到这一点。我似乎无法在网上找到任何帮助。

【参考方案1】：

这里有一个演示： http://people.mozilla.org/~cpearce/buffered-demo.html

我已经制作了这个播放器，虽然代码不是为了让其他人容易理解，但它似乎是您正在寻找的带有可点击进度条的画布，您可以在其中绘制图像： http://netkoder.dk/netkoder/video_chernobyl.php

单机版：http://netkoder.dk/netkoder/eksempler/eksempel0109.html

【讨论】：

哇，谢谢！您是否碰巧有代码的原始副本可供下载？

不，我还没有一个易于理解的独立示例。我可以尝试制作一个独立的示例。

这里是独立版netkoder.dk/netkoder/eksempler/eksempel0109.html

谢谢！关于如何在画布上绘制 .png 图像的任何想法？

使用 context.drawImage() 但你必须先预加载图像，否则它不会一直显示：html5canvastutorials.com/tutorials/html5-canvas-images