HTML5 中的视频 Video 和音频 Audio 使用方法

2022-11-24 0 949

这首诗主要就传授了 HTML5中内建的和 原素,能很方便快捷的内嵌多新闻媒体到页面中。

内嵌新闻媒体

采用 HTML5撰写页面,在你的页面中内嵌新闻媒体是十分方便快捷的:

Your browser does not support the video element.

那个范例是在页面中读取几段音频,这儿是你的 HTML 文件格式中内嵌音音频为例:

Your browser does not support the audio element.

src 特性能是两个音音频文件格式的远距 URL 门牌号,也能是你中文网站邻近地区的门牌号。

Your browser does not support the audio element

此标识符实例采用原素的特性:

controls :与否表明页面上的音音频国际标准HTML5的掌控。autoplay :与否弹出loop :循环式单次,预设只播映一场,增设为正数为无穷循环式。

preload 特性用作缓冲器新闻媒体打文件格式,提供更多3个模块。

“none”不缓冲器文件格式”auto” buffers the media file”metadata” buffers only the metadata for the file

多个源文件格式能采用组件以提供更多音频或音音频在相同的应用程序相同文件格式标识符的明确规定。比如:

Your browser does not support the video element.

那个 ogg 文件格式须要应用程序全力支持 Ogg 文件格式。假如应用程序不全力支持 ogg,应用程序采用 MPEG-4文件格式。参看新闻音频文件格式在相同的应用程序的音音频和音频原素的全力支持。

您还能选定该MPEG的新闻媒体文件格式明确要求;这能让应用程序更为合情合理的下定决心:

Your browser does not support the video element.

在这儿,我们选定的音频采用 Dirac 和 Speex MPEG。假如应用程序全力支持 ogg,但没有选定的MPEG,音频将不读取。

假如没有选定 type 特性,那么该新闻媒体类型是从服务器检索和查看应用程序能处理它,假如无法识别,那么将检查下两个文件格式源,假如选定的源原素不能用,两个错误事件发送到音频组件。

掌控新闻媒体的播映

一旦你在你的HTML文件格式中内嵌的新闻媒体采用新的原素,你能以编程方式从 JavaScript 标识符掌控他们。比如,开始(或停止)播映,你能这样做:

var myVideo = document.getElementsByTagName(“video”)[0];v.play();

掌控两个 HTML5音音频播映器播映,暂停,增加和减少的体积是直接采用一些 JavaScript。

Play the AudioPause the AudioIncrease VolumeDecrease Volume

停止新闻媒体下载

而停止新闻媒体播映很容易调用原素的 pause()方法,应用程序会继续下载新闻媒体到新闻媒体原素增设通过垃圾收集。

这儿有两个技巧,停止一场下载:

var mediaElement = document.getElementById(“myMediaElementID”);mediaElement.pause();mediaElement.src=;//ormediaElement.removeAttribute(“src”);

通过删除新闻媒体原素的 src 特性(或增设为空字符串,这可能取决于应用程序),你移除了组件的内部解码器,它停止网络下载。

增设播映时间

新闻媒体文件格式全力支持提供更多当前播映的位置,这是通过增设新闻媒体文件格式播映时间的值实现的,简单的增设。

你能采用原素的可搜索的特性来确定是当前可寻求新闻媒体的范围。这是返回两个对象的 timeranges 监听时间的范围:

var mediaElement = document.getElementById(mediaElementID);mediaElement.seekable.start();// Returns the starting time (in seconds)mediaElement.seekable.end();// Returns the ending time (in seconds)mediaElement.currentTime =122;// Seek to 122 secondsmediaElement.played.end();// Returns the number of seconds the browser has played

选定播映范围

当选定新闻媒体的 URI 为和 原素,你能选择包含附加的信息来选定要发挥新闻媒体的部分。为此附加两个哈希标记#,其次是新闻媒体片段的描述。

一种是采用语法选定的时间范围:

#t=[starttime][,endtime]

时间能被选定为两个秒数(作为两个浮点值)或作为两个小时/分钟/秒的时间间隔冒号(如2:05:012小时,5分钟,1秒),几个范例:

https://www.wenjiangs.com/wp-content/uploads/madagascar3.mp4#t=10,20Specifies that the video should play the range 10 seconds through 20 seconds.Specifies that the video should play from the beginning through 10.5 seconds.https://www.wenjiangs.com/wp-content/uploads/madagascar3.mp4#t=,02:00:00Specifies that the video should play from the beginning through two hours.Specifies that the video should start playing at 60 seconds and play through the end of the video.

新闻媒体原素的 URI 规范播映范围部分被添加到 Gecko 9.0,在那个时候,这是新闻媒体片段的 URI 规范实施的 Gecko 唯一的一部分,它只能用作选定新闻媒体原素来源的时候,而不是在门牌号栏。

替代方案

HTML之间包括,比如新闻媒体原素的开始标记和结束标记是由应用程序不全力支持 HTML5的新闻媒体处理。你能利用那个事实来为应用程序提供更多替代可选新闻媒体。

本节提供更多音频两种替代方案。在每一种情况下,假如应用程序全力支持 HTML5音频,则采用 HTML5的播映方式,假如不全力支持 HTML5音频,则改用其他兼容性方案。

采用Flash

你能在原素不全力支持采用 Flash 播映 Flash 文件格式的电影:

请注意,你不应该包括中以 object 标记要比其他 Internet Explorer 应用程序兼容。

利用 Java Applet 播映 OGG 文件格式的音频

没有所谓的 Java Applet 的,能被采用到的音频播映 OGG 文件格式在应用程序的回退是别有 Java 全力支持,全力支持 HTML5音频

You need to install Java to play this file.

假如你没有创建一种切割对象的子原素的原素,如 Firefox v3.5以上,这样的音频设备的句柄,但 Java natively 没有安装 incorrectly 通知用户,他们将须要安装插件,以查看内容的页面。

错误处理

这让你发现哪些资源读取失败,这可能是有用的。考虑那个HTML:

Since Firefox doesnt support MP4 and 3GP due to their patent-encumbered nature, the elements with the IDs “mp4src” and “3gpsrc” will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources arent tried at all.

检测时无源读取

To detect that all child elements have failed to load, check the value of the media elements networkState attribute. If this is HTMLMediaElement.NETWORKNOSOURCE, you know that all the sources failed to load.

If at that point you add another source by inserting a new element as a child of the media element, Gecko attempts to load the specified resource.

表明内容时没有 source 能解码

Another way to show the fallback content of a video when none of the sources could be decoded in the current browser is to add an error handler on the last source element. Then you can replace the video with its fallback content:

Click image to play a video demo of dynamic app search

var v = document.querySelector(video),sources = v.querySelectorAll(source),lastsource = sources[sources.length-1];lastsource.addEventListener(error, function(ev){var d = document.createElement(div);d.innerHTML = v.innerHTML;v.parentNode.replaceChild(d, v);}, false);

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务