如何解决使用HTML中的Javascript更改视频源,而无需刷新页面,仅刷新视频
我和我的团队正在制作一个自定义html视频播放器,并且正在设置面板上工作 我们主要担心的第一个选项是视频质量选项。
<video id="video" class="nm" poster="the poster url">
<source src="video source url of the video at 480p" type="video/mp4" size="480">
<source src="video source url of the video at 720p" type="video/mp4" size="720">
<source src="video source url of the video at 1080p" type="video/mp4" size="1080">
</video>
现在我们要做的是,当用户打开一个选项时,它将视频源更改为具有size
属性指定质量的源。
Image reference here
PS:我们正在从头开始制作视频播放器,因为它是独立构建的,没有API(例如Video.js,JWPlayer,Plyr),我们正在使用纯JavaScript和html从头开始制作所有需要的东西...并且我们正在制作一个流媒体网站,我的团队和我想制作一个由我们为该网站制作的视频播放器,并在稍后发布“ 也许 ”但是现在我们要制造一个全新的视频播放器,并且由于我们不确定执行此操作的最佳方法,因此只是推迟了这一部分!
编辑
此外,我们希望视频暂停播放并更改质量,并在暂停的位置播放
解决方法
请注意,对于本机msg.reply('? replaced');
msg.delete({timeout: 500});
,浏览器将决定显示哪个msg.delete()
并选择它支持/理解的第一个元素(例如,第一个受支持的视频文件格式):https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Usage_notes
要避免这种情况并迫使浏览器显示某个视频源URL,请仅放置一个video
元素,并使用javascript处理source属性。
要在本地HTML5视频播放器中暂停和播放视频,您可以使用<source>
的API:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
它具有您要寻找的play和pause函数。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。