如何在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视频元素停止缓冲。

谢谢!

解决方法

好吧,所以对于最后几天我真的一直在努力这个问题。
这里是我的分析和解决方案:

总之,我试图解决的问题:
我注意到,当播放器暂停时,HTML5播放器不会停止下载(即使在一段合理的时间之后)。使用一个24/7的音频流和开发移动网站我意识到,这是远远不是最佳的考虑到高数据使用率,如果他们离开网站开放 – 虽然我认为我会让一些电信公司非常高兴“俯瞰“ 这个问题…
只是为了澄清,我真的不关心固定长度的文件。下载完整的文件是大多数时候查看在线资源所需的功能(想慢连接),所以没有我试图阻止。

分析:
HTML5音频元素没有stop()函数,也没有一个选项,您可以设置允许缓冲的数据量,或者说要让元素停止缓冲的方式 – 不要将其与“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);

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

希望这可以帮助。

HTML5视频:强制中止缓冲的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部