暂停视频不会停止 html5 视频标签中的音频
Posted
技术标签:
【中文标题】暂停视频不会停止 html5 视频标签中的音频【英文标题】:Pausing video doesn't stop audio in html5 video tag 【发布时间】:2012-08-04 12:09:15 【问题描述】:我正在使用其pause()
方法暂停视频。问题是音频继续播放...我还尝试从 Firefox 中的 javascript 控制台暂停它...没有任何反应。该视频为 .ogg 格式,甚至无法在 Chrome 中播放(因为我认为它不受支持)。
我在 Amazon S3 上托管了视频,它完美地流式传输。我正在动态创建元素,从 JSON 请求中加载其信息。
这是一些代码:
function showVideo()
var video = videodata;
var videobox = $('#videobox').first();
var videoplayer = document.getElementById('videoplayer');
if (video.Enabled)
if ((videoplayer != null && videoplayer.currentSrc != video.Location) || videoplayer == null)
console.log('Creating video elem');
videobox.empty();
videobox.append('<video id="videoplayer" preload="auto" src="' +
video.Location + '" autoplay="autoplay" loop="loop" />');
videobox.show();
else
if (videoplayer != null)
videoplayer.pause();
console.log('Pausing video...');
console.log('Deleting video elem');
videobox.hide();
videobox.empty();
我之前已经发布了一个类似的问题...但现在我正在使用其他浏览器,所以我想我必须创建一个新问题。
这是工作代码(感谢用户heff!)
function showVideo()
var video = videodata;
var videobox = $('#videobox').first();
var videoplayer = document.getElementById('videoplayer');
if (video.Enabled)
if ((videoplayer.src != video.Location) || videoplayer.src == '')
console.log('Playing video: ' + video.Location);
videoplayer.src = video.Location;
videoplayer.load();
videoplayer.play();
videobox.show();
else
if (videoplayer.src != '')
console.log('Pausing video...');
videoplayer.pause();
videoplayer.src = '';
videobox.hide();
【问题讨论】:
【参考方案1】:我遇到了一个类似的问题,非常棒的程序员解决了这个问题。看看这篇文章。它可能很有用。 html5 Video Controls do not work
如果你使用的是 html 属性:
<video id="yourvideoID" poster="Pic.jpg" loop autoplay controls >
<source src="//example.website/InnovoThermometer.mp4" type="video/mp4">
</video>
移除自动播放。
然后用jquery代替自动播放:
$(document).ready(function() $("#bigvid3").get(0).play(); );
至于来源有多个位置: html5 video playing twice (audio doubled) with JQuery .append()
和
Auto-play an HTML5 video on Dom Load using jQuery
【讨论】:
虽然理论上这可以回答这个问题,it would be preferable 在这里包含答案的基本部分,并提供链接以供参考。 谁给了我-1的好作品。我修正了我的答案以反映更完整的回应。我只是想帮忙。 忘记-1s,您已经编辑了您的帖子并使其成为一个不错的答案。随着时间的推移,您将获得更多 +1。讨厌的人会讨厌:) 感谢您提出修改建议 :) 没有它,我不会在这方面做得更好,呵呵 没问题!添加更多精彩的答案,你会没事的。祝你好运。【参考方案2】:我的猜测是 showVideo 以某种方式被调用了两次并创建了两个副本,其中一个在您调用 pause 后仍会继续播放。
在您的代码中,videoplayer var 不会引用您稍后使用 append 创建的视频标签,它将指向之前具有该 id 的任何内容,我假设当您清空该框时会删除它,但可能会坚持在内存中(并继续播放声音)。
只是我的最佳猜测,但无论哪种方式,最好使用视频元素的 API 来设置源和其他参数,而不是清空框并重新构建标签。
videoplayer.src = video.Location;
videoplayer.autoplay = true;
// etc.
此外,100% 不是宽度/高度属性的有效值。您需要使用 CSS 使视频拉伸以填充一个区域。
【讨论】:
我按照您的建议不要每次都重新创建元素并且它可以工作。但是我检查了该方法是否两次进入相同的 if 块:不。我认为这是一个错误..顺便说一句,如果有人遇到同样的问题,我发布了工作代码。 ;-)以上是关于暂停视频不会停止 html5 视频标签中的音频的主要内容,如果未能解决你的问题,请参考以下文章