HTML5 视频:强制中止缓冲 [英] HTML5 Video: Force abort of buffering

问题描述

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

How does one force an abort event on an HTML5 video? I have an overlay, where, when I close it, the video should pause playing and then stop buffering. However, my internet connection continues to go nuts. Oh, I'm using Chrome 7.0.5 on Mac OS X 10.6.

我尝试了几件事情——它们都没有奏效:

I've tried a couple of things -- none of them have worked:

(对于不熟悉 XUI 的人来说，x$ 就像 jQuery 的包装函数)

(For those unfamiliar with XUI, x$ is like the jQuery wrapping function)

首先，调度 abort HTML 事件:

First, dispatching an abort HTML Event:

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

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

Next, changing the src and then forcing a load:

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

我的视频元素如下所示:

My video element looks something like this:

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

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

Again, none of these work. Anyone ran into this problem before? Any suggestions?

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

In summary, I am trying to force an HTML5 video element to stop buffering.

谢谢！

推荐答案

好的，所以在过去的几天里，我真的一直在为这个问题苦苦挣扎.
这是我的分析和解决方案:

Ok, so for the last few day's I've really been struggling with this issue.
Here is my analysis and solution:

简而言之，我试图解决的问题:
我注意到 HTML5 播放器在播放器暂停时不会停止下载(根本没有，甚至在一段合理的时间之后).使用 24/7 音频流并开发一个移动网站，我意识到这对于我的访问者来说远非最佳，因为如果他们让网站保持打开状态，那么考虑到高数据使用量 - 尽管我确实认为我会让一些电信公司非常高兴通过忽略这个问题...
只是为了澄清，我并不真正关心固定长度的文件.大多数情况下，下载完整文件是查看在线资源所需的功能(想想慢速连接)，所以我没有试图阻止.

In short the problem I tried to solve:
I noticed that the HTML5 player does not stop downloading when the player is paused (at all, not even after a reasonable amount of time). Working with a 24/7 audio stream and developing a mobile website I realized that this is far from optimal for my visitors considering the high data usage if they leave the site open - although I do think I would make some telco's very happy by "overlooking" this issue...
Just to clarify, I don't really care about files with a fixed length. Downloading the complete file is most of the time a functionality required for viewing online resources (think slow connection) so not something I tried to prevent.

分析:
HTML5 音频元素没有 stop() 函数，也没有可以设置允许缓冲的数据量的选项，或者说您希望元素停止缓冲的方式 - 不要将此与预加载"功能混淆，这仅适用于单击播放按钮之前的元素.
我不知道为什么会这样以及为什么此功能不可用.如果有人能向我解释为什么这些关键功能没有在一个标准中实现，该标准应该使移动电话的网络开发更好和更标准化，我很想知道.

Analysis:
The HTML5 audio element does not have a stop() function, nor does it have an option where you can set the amount of data that it is allowed to buffer, or a way of saying you want the element to stop buffering - Don't confuse this with the 'preload' function, this only applies to the element before the play button is clicked.
I have no clue why this is and why this functionality is not available. If anyone can explain to me why these crucial functions are not implemented in a standard that should make web development for mobile phones better and more standardized I would love to know.

解决方案:
我发现在音频元素中实现(某种)停止功能的唯一可行解决方案如下:
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);

Solution:
The only working solution I found to implement a (sort of) stop function in your audio element is as follows:
1. Pause the current player - you can hook the pause event on the player via audio.addEventListener('pause', yourFunction);
2. Set the source to empty - audio.src = "";
3. Load the src - audio.load();
4. Remove the whole audio element
5. Insert a new HTML5 audio element without the source defined
6. Set the source (the source that was there in the first place) - audio.src = "old source url
7. Rehook the pause event - audio.addEventListener('pause', current-function);

iOS 需要完全注入新的 HTML5 音频播放器.简单地重置 src 然后加载它会导致播放器在我的情况下自动播放"......

Completely injecting a new HTML5 audio player is necessary for iOS. Simply resetting the src and then loading it causes the player to 'autoplay' in my case...

对于懒人(包括 jQuery):

For the lazy people (includes 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);

按暂停会导致您的访问者丢失音频/视频文件中的当前位置，并会重新开始.我对这个问题没有解决方案.再说一次，如果您正在处理实时流，这个解决方案应该没问题.

Pressing pause will cause your visitor to lose there current location in the audio/video file and it will start again. I have no solution for this issue. Then again, if you are dealing with a live stream this solution should be fine.

希望这会有所帮助.

这篇关于HTML5 视频:强制中止缓冲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！