如何解决HTML5视频播放器,如何控制进度条?
我在许多问题中寻找解决方案,但没有得到答案,我正在播放HTML5视频:
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="{{asset('promos/'.$course->id.'.mp4')}}" type="video/mp4">
<source src="{{asset('promos/'.$course->id.'.m4v')}}" type="video/ogg">
</video>
它工作正常,但是我无法控制进度条,无法向前或向后移动视频,该怎么办?
有人可以帮助吗?
视频链接
https://streamable.com/k3rved
解决方法
您的HTML5看起来不错-下面的视频将允许使用滚动条作为参考的向前和向后移动:
<video oncontextmenu="return false;" width="100%" height="auto" controls id="player"
controls controlsList="nodownload" poster="{{asset('images/'.$course->id.'.png')}}"
onended="alert('it is worked')">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
如果问题是当您将鼠标悬停在进度栏上时缺少缩略图,则需要在服务器端分别生成缩略图并将其包含在您可用的视频容器(例如mp4)中。
更新
上面问题中的视频链接实际上不是指向视频的链接,而是指向网页的链接。
当您检查该网页时,确实包含一个视频以及videoJS播放器,但是您不能将该网页链接用作HTML5视频中的“ src”属性。
假设您有权使用该视频,则可以从该网页上的视频中提取src。在这种情况下,无论如何在写作时,这种方法都是可行的-有时网页中的视频会有访问限制或身份验证要求,以防止从其他站点访问它们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。