Question

如何在HTML5视频上强制中止事件？我有一个叠加层，当我关闭它时，视频应暂停播放，然后停止缓冲。但是，我的互联网连接仍然疯狂。哦，我在Mac OS X 10.6上使用Chrome 7.0.5。

我尝试过几件事 - 没有一件事有效：

（对于那些不熟悉XUI的人来说，x $就像jQuery包装函数一样）

首先，调度中止HTML事件：

var videoEl = x$('#video_el')[0];
videoEl.pause();
var evObj = document.createEvent('HTMLEvents');
evObj.initEvent('abort', false, false);
videoEl.dispatchEvent(evObj);

接下来，更改src然后强制加载：

var videoEl = x$('#video_el')[0];
videoEl.pause();
videoEl.src = "";
videoEl.load(); //tried with and without this step

编辑：我的视频元素看起来像这样：

<video id="video_el" src="<video_url>" preload="none" controls="controls" />

同样，这些都不起作用。以前有人遇到过这个问题吗？有什么建议？

总之，我试图强制HTML5视频元素停止缓冲。

谢谢！

Answer 1

好的，所以最近几天我一直在努力解决这个问题这是我的分析和解决方案：

总之我试图解决的问题：
我注意到HTML5播放器在播放器暂停时不会停止下载（根本不是在合理的时间之后）。使用24/7音频流并开发移动网站我意识到，如果他们离开网站时考虑到高数据使用率，这对我的访问者来说远非最佳 - 尽管我认为我会让一些电信公司非常高兴“俯瞰“这个问题...... 只是为了澄清，我并不关心具有固定长度的文件。下载整个文件大多数情况下是查看在线资源所需的功能（想想慢速连接），所以不是我试图阻止的。

分析：
HTML5音频元素没有stop（）函数，也没有可以设置允许缓冲的数据量的选项，或者说你希望元素停止缓冲的方式 - 不要将此与“预加载”功能混淆，这仅适用于单击播放按钮之前的元素我不知道为什么会这样，为什么这个功能不可用。如果有人能够向我解释为什么这些关键功能没有在一个标准中实现，这个标准应该让手机的网页开发更好，更标准化，我很想知道。

解决方案：
我发现在音频元素中实现（某种）停止功能的唯一工作解决方案如下：
1.暂停当前播放器 - 您可以通过audio.addEventListener（'pause'，yourFunction）将暂停事件挂钩到播放器上;
2.将源设置为空 - audio.src =“”;
3.加载src - audio.load（）;
4.删除整个音频元素
5.插入没有源定义的新HTML5音频元素
6.设置源（首先在那里的源） - audio.src =“old source url
7.重新挂起暂停事件 - audio.addEventListener（'pause'，current-function）;

iOS必须完全注入新的HTML5音频播放器。只需重置src然后加载它就会导致玩家在我的情况下“自动播放”......

对于懒人（包括jQuery）：

var audio = $("audio").get(0);
audio.pause(0);
var tmp = audio.src;
audio.src = "";
audio.load();
$("audio").remove();

$("#audio-player").html("<audio controls preload='none'></audio>");<br>
audio = $("audio").get(0);
audio.src = tmp;
audio.addEventListener('pause', current-function);

按暂停键会导致访问者丢失音频/视频文件中的当前位置，然后重新开始。我没有解决这个问题的方法。再说一次，如果你正在处理一个直播流，这个解决方案应该没问题。

希望这有帮助。

Answer 2

使用preload =“none”，这是我在暂停视频后强制中止缓冲的方法，然后使用jQuery在暂停的位置恢复播放。

<video id="video_el" src="<video_url>" preload="none" controls="controls" />    

<script>
jQuery(function() {

  var video = jQuery('video').get(0);

  video.addEventListener('pause',function(){
     var tmp_src = video.src;
     var playtime = video.currentTime;
     video.src = '';
     video.load();
     video.src = tmp_src;
     video.currentTime = playtime;
  });

});
</script>

Answer 3

在调用src之前，关键步骤似乎是不将load()设置为空值。我已经成功地这样做了：

var wasPlaying = !audioPlayer.paused;
audioPlayer.currentTime = 0.0; // Optional -- can be left out for pause
audioPlayer.pause();

if (wasPlaying) { // This prevents the browser from trying to load the entire source
    audioPlayer.load();
}

在Win10上的Chrome和Firefox中，都会触发中止事件。在我的具体情况下，这需要关闭无限期保持打开的套接字，这导致每个服务器限制达到六个连接，同一页面上使用了多个播放器。

Answer 4

见这里：http://dev.w3.org/html5/spec/video.html#attr-media-preload

也许您可以将preload设为none？

如果不起作用：您是否可以获取其属性，删除它，插入新的视频元素并为该元素提供已保存的属性？

Answer 5

实际上，您可以通过将src属性设置为带有一些参数的php / aspx文件来读取文件内容并将数据作为等效类型（例如，Content-Type: video/mp4）来执行相同的操作。但是它在IE 11中不起作用（多么令人惊讶：D），那么你需要为这个华丽的浏览器做上面的诀窍。

使用此...

<video id="v1" preload="none">
  <source src="video.php?id=24" type="video/mp4">
</video>

而不是......

<video id="v2" preload="none">
  <source src="video-24.mp4" type="video/mp4">
</video>

作为一个缺点，你将无法确定视频的全长，但要解决这个问题，这不是太大，你可以将这个值存储在你的数据库中，或者只是做一个小技巧。

我已经使用Chrome 32，Firefox 26，Opera 18和IE 11测试了以下脚本

setInterval(function() {
    var r = [];

    try {
        r.push(v1.buffered.end(0));
    } catch(e) {
        r.push('nahh');
    };

    try {
        r.push(v2.buffered.end(0));
    } catch(e) {
        r.push('second nahh');
    };

    console.log(r.join(', '));
}, 500);

在我的localhosts测试中......

Firefox 26按下播放后，它总是缓存整个文件。

IE 11（考虑src="video-24.mp4"，因为另一个不起作用）按下播放后，它总是按块缓冲文件块，即使它已暂停并完全忽略preload="none"属性

Chrome 32完美运行（与Opera 18相同）。

Answer 6

您还可以将src更改为包含一秒钟无声的mp3。比用新的src调用play函数。随着新mp3的加载，流的缓冲停止。

var audio = document.getElementById("audioradio");
audio.src = "/sound/pause.mp3";
audio.play();

<audio style="display: none;" id="audioradio" src="/sound/pause.mp3" preload="none"></audio>

仅在Firefox中具有Testet！

HTML5视频：强制中止缓冲

6 个答案: