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

查看:998
本文介绍了HTML5视频:强制中止缓冲的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何迫使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();编辑:我的视频元素看起来像这样:

 < video id =video_elsrc =< video_url> preload =nonecontrols =controls/> 

再一次,这些都不起作用。以前有人遇到过这个问题吗?有什么建议么?总之,我试图强制HTML5视频元素停止缓冲。



谢谢!

好的,所以在过去的几天里,我一直在为这个问题苦苦挣扎。

这是我的分析和解决方案:

总而言之,我试图解决的问题是:

我注意到,HTML5播放器不会停止下载(完全没有,甚至在一段合理的时间之后)。使用24/7音频流并开发移动网站我意识到,如果他们离开网站时考虑到高数据使用率,这对我的访问者来说远非最佳 - 尽管我认为我会让一些电信公司非常高兴俯瞰这个问题...

只是为了澄清,我并不关心固定长度的文件。下载整个文件大部分时间都是查看在线资源所需的功能(想想慢连接),所以我试图阻止它。



分析:

HTML5音频元素没有stop()函数,也没有可以设置允许缓冲的数据量的选项,或者说要让元素停止缓冲的选项 - 不要将它与'preload'函数混淆,这只适用于点击播放按钮之前的元素。

我不知道为什么这是为什么这个函数不可用。如果任何人都可以向我解释为什么这些关键功能没有在标准中实现,这将使手机的网页开发更好更标准化,我很想知道。

解决方案:

我在音频元素中实现一种(某种)停止功能的唯一工作解决方案如下:

1.暂停当前播放器 - 您可以暂停播放器上的事件通过audio.addEventListener('pause',yourFunction);

2.将源设置为空 - audio.src =;

3.加载src - audio.load();

4.删除整个音频元素

5.插入一个新的HTML5音频元素,但不定义源
6.设置源(首先出现的源代码) - audio.src =旧的源URL url
7.重新暂停事件 - audio.addEventListener('pause',current-function); < br>



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);

按暂停会导致访问者丢失音频/视频文件中的当前位置,它将启动再次。我没有解决这个问题的方法。然后再次,如果你正在处理直播,这个解决方案应该没问题。



希望这有助于。


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:

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

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);

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

EDIT: 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?

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

Thanks!

解决方案

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

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.

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.

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);

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...

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.

Hope this helps.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆