JavaScript HTML5脚本编程——“媒体元素”的注意要点

baoxl 发布于2019-08-19 17:37 / 3360人阅读

摘要：事件除了大量属性之外，这两个媒体元素还可以触发很多事件。下表列出了媒体元素相关的事件。这两个媒体元素都有一个方法，该方法接收一种格式编解码器字符串，返回或空字符串。

audio和video元素的用法如下：

因为并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是要像下面这样使用一或多个元素。

属性

点击这里查询video标签接口的兼容性

下表列出了这两个元素共有的属性，通过这些属性可以知道媒体的当前状态。

事件

除了大量属性之外，这两个媒体元素还可以触发很多事件。这些事件监控着不同的属性的变化，这些变化可能是媒体播放的结果，也可能是用户操作播放器的结果。下表列出了媒体元素相关的事件。

自定义媒体播放器

DOM部分：

0/0

js部分：

var player = document.getElementById("player"),
    btn = document.getElementById("video-btn"),
    curtime = document.getElementById("curtime"),
    duration = document.getElementById("duration");

btn.onclick = function() {
    if (player.paused) {
        player.play();
        btn.value = "Pause";
        duration.innerHTML = player.duration;
    } else {
        player.pause();
        btn.value = "Play";
    }
};

player.onended = function() {
    btn.value = "Play";
};

var x = setTimeout(function timing() {
    curtime.innerHTML = player.currentTime;
    var y = setTimeout(timing, 100);
    y = null;
}, 100);
x = null;

检测编码器的支持情况

有一个JavaScript API能够检测浏览器是否支持某种格式和编解码器。这两个媒体元素都有一个

canPlayType()方法，该方法接收一种格式/编解码器字符串，返回"probably"、"maybe"或""（空字符串）。

空字符串是假值，因此可以像下面这样在if语句中使用canPlayType()：

if (audio.canPlayType("audio/mpeg")){
    //进一步处理
}

canPlayType()传入了一种MIME类型，则返回值很可能是"maybe"或空字符串。这是因为媒体文件本身只不过是音频或视频的一个容器，而真正决定文件能否播放的还是编码的格式。在同时传入MIME类型和编解码器的情况下，可能性就会增加，返回的字符串会变成"probably"。下面来看几个例子。

var audio = document.getElementById("audio-player");

//很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
    //进一步处理
}

//可能是"probably"
if (audio.canPlayType("audio/ogg; codecs="vorbis"")){
    //进一步处理
}

注意，编解码器必须用引号引起来才行。下表列出了已知的已得到支持的音频格式和编解码器。

Audio类型

原生的JavaScript构造函数Audio，可以在任何时候播放音频。

var audio = new Audio("lalala.mp3");
audio.autoplay = true;
audio.loop = true;

创建新的Audio实例即可开始下载指定的文件。下载完成后，调用play()就可以播放音频。在iOS中，调用play()时会弹出一个对话框，得到用户的许可后才能播放声音。如果想在一段音频播放后再播放另一段音频，必须在onfinish事件处理程序中调用play()方法。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78688.html

JavaScript HTML5脚本编程——“历史状态管理”的注意要点

摘要：历史状态管理是现代应用开发中的一个难点。通过更新对象为管理历史状态提供了方便。而通过状态管理，能够在不加载新页面的情况下改变浏览器的。在和中，传递给或的状态对象中不能包含元素。还支持一个属性，它返回当前状态的状态对象。历史状态管理是现代Web应用开发中的一个难点。在现代Web应用中，用户的每次操作不一定会打开一个全新的页面，因此后退和前进按钮也就失去了作用，导致用户很难在不同状态间切...

Rainie 2019-08-19 17:36 评论0 收藏0
JavaScript HTML5脚本编程——“跨文档消息传递”的注意要点

摘要：跨文档消息传送，有时候也简称为，指的是来自不同域的页面间传递消息。接收到消息时，会触发对象的事件。接受到消息后验证发送窗口的来源是至关重要的。基本的检测模式如下。跨文档消息传送（cross-document messaging），有时候也简称为XDM，指的是来自不同域的页面间传递消息。例如，www.wrox.com域中的一个页面与一个位于内嵌框架中的p2p.wrox.com域中的页面...

TerryCai 2019-08-19 17:33 评论0 收藏0
JavaScript HTML5脚本编程——“原生拖放”的注意要点

摘要：在中，唯一有效的放置目标是文本框。以的实例为基础指定了拖放规范。触发事件后，随即会触发事件，而且在元素被拖动期间会持续发送该事件。指定一副图像，当拖动发生时，显示在光标下方。最早在网页中引入JavaScript拖放功能是IE4。当时，网页中只有两种对象可以拖放：图像和某些文本。在IE4中，唯一有效的放置目标是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且几乎网页中的任何元...

forsigner 2019-08-19 17:35 评论0 收藏0