如何在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视频元素停止缓冲.
谢谢!
Rub*_*ben 51
好的,所以在过去的几天里,我一直在努力解决这个问题.
这是我的分析和解决方案:
简而言之,我试图解决的问题是:
我注意到HTML5播放器在播放器暂停时不会停止下载(根本不是在合理的时间之后).使用24/7音频流并开发移动网站我意识到,如果他们离开网站时考虑到高数据使用率,这对我的访问者来说远非最佳 - 尽管我认为我会让一些电信公司非常高兴"俯瞰"这个问题......
为了澄清,我并不真正关心具有固定长度的文件.下载整个文件大多数时候是查看在线资源所需的功能(想想慢速连接),所以不是我试图阻止的东西.
分析:
HTML5音频元素没有stop()函数,也没有可以设置允许缓冲的数据量的选项,或者说你希望元素停止缓冲的方式 - Don不要将此与'preload'功能混淆,这仅适用于单击播放按钮之前的元素.
我不知道为什么会这样,为什么这个功能不可用.如果有人能够向我解释为什么这些关键功能没有在一个标准中实现,该标准应该使移动电话的web开发更好,更标准化,我很想知道.
解决方案:
我发现在音频元素中实现(某种)停止功能的唯一可行解决方案如下:
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);
按暂停将导致访问者丢失音频/视频文件中的当前位置,然后它将重新开始.我没有解决这个问题的方法.再说一次,如果你正在处理一个直播流,这个解决方案应该没问题.
希望这可以帮助.
使用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>