HTML5多媒体

音频播放

<!DOCTYPE html>
<html><head><title>音频播放</title></head><body><h2>音频播放</h2><audio src="birds.mp3" controls>您的浏览器不支持audio元素</audio></body>
</html>

视频播放

<!DOCTYPE html>
<html><head><title>视频播放</title></head><body><h2>视频播放</h2><video src="9-tsr_h1080p.mov" width="800" height="480" controls>浏览器不支持video元素</video></body>
</html>

多文件播放

<!DOCTYPE html>
<html><head><title>音频播放</title></head><body><h3>音频播放</h3><audio controls><source src="1.ogg" type="audio/ogg" media="aaa"/><source src="1.mp3" type="audio/mpeg" /><source src="1.wav" type="audio/x-wav" /></audio></body>
</html>

音频播放器

<!DOCTYPE html>
<html><head><title>音频播放器</title></head><body><script type="text/javascript">// 定义能播放的所有音频var musics = ["1.mp3","brids.mp3","161939.mp3"];// 定义正在播放的音频文件的索引var index = 0;// 记录顺序播放、随机播放变量var playType="sequence";window.onload = function () {var typeSel = document.getElementById("typeSel");// 当用户更改下拉菜单选项时，改变播放方式typeSel.onchange = function () {window.playType = typeSel.value;}var player = document.getElementById("player");// 页面加载时播放第一个音频player.src = musics[index];player.onload = function () {if (playType == "random") {// 计算下一个随机数index = Math.floor(Math.random() * musics.lenght);// 随机播放下一个音频player.src = musics[index];}else {// 播放下一个音频player.src = musics[++index % musics.length];}// 播放音频player.play();}}</script><h2>音频播放器</h2><select name="typeSel" id="typeSel" style="width: 160px;"><option value="sequence">顺序播放</option><option value="random">随机播放</option></select><br><audio id="player" controls>浏览器不支持audio元素</audio>
</body></html>

视频播放器

<!DOCTYPE html>
<html><head><title>视频播放器</title></head><body><h2>视频播放器</h2><video src="9-tsr_h1080p.mov" id="mv" width="800" height="480" loop>浏览器不支持video元素</video><br><input type="button" id="bn" value="播放" /><span id="detail"></span>秒<script type="text/javascript">var bn = document.getElementById("bn");var mv = document.getElementById("mv");var detail = document.getElementById("detail");// 为video元素的ontimeupdate事件绑定监听器mv.ontimeupdate = function(){detail.innerHTML = mv.currentTime + "/" + mv.duration;};bn.onclick = function(){if (mv.paused){mv.play();bn.value = "暂停";}else{mv.pause();bn.value = "播放";}}</script></body>
</html>

视频播放器

浏览器不支持video元素

    <input type="button" id="bn" value="播放" /><span id="detail"></span>秒<script type="text/javascript">var bn = document.getElementById("bn");var mv = document.getElementById("mv");var detail = document.getElementById("detail");// 为video元素的ontimeupdate事件绑定监听器mv.ontimeupdate = function(){detail.innerHTML = mv.currentTime + "/" + mv.duration;};bn.onclick = function(){if (mv.paused){mv.play();bn.value = "暂停";}else{mv.pause();bn.value = "播放";}}</script>
</body>

HTML5多媒体（音频、视频播放）相关推荐

平凡前端之路_03.HTML5的音频视频多媒体
文章目录 HTML5音频视频 HTML5音频 HTML5视频 HTML5音频视频常用属性 HTML5音频视频常用方法 HTML5音频视频常用事件 HTML5音频视频特殊属性浏览器不支持音频视频自动播 ...
html原生音频播放器倍速,HTML5倍数功能视频播放器（加速2倍，1.5倍播放）
HTML5倍数功能视频播放器(加速2倍,1.5倍播放) 倍数功能视频播放器的应用: 培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,2倍的速度观看视频,可以更快速的看完课程,节省时间. va ...
HTML5之音频audio知识（部分vedio）
2019独角兽企业重金招聘Python工程师标准>>> HTML总结(二)[HTML5之音频] HTML5重点知识之音频 audio标签兼容性: Internet Explorer ...
《HTML5多媒体应用开发》——第2章　HTML5多媒体元素2.1　Web多媒体历史
本节书摘来自异步社区<HTML5多媒体应用开发>一书中的第2章,第2.1节,作者: [爱]Ian Devlin 更多章节内容可以访问云栖社区"异步社区"公众号查看. 第 ...
html5 audio 资源,HTML5 Audio(音频)
原标题:HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放 ...
html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
使用HTML5多媒体,audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频. 小知识:视频文件包含了音频轨道,视频轨道和其他一些元数据.当我们播放视频的时候, ...
h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
html5多媒体组件API
html5多媒体组件指的是video(视频)组件和audio(音频)组件.HTML5多媒体组件可以在不借助诸如Flash Player等第三方插件的情况下,直接在你的网页上嵌入多媒体组件.浏览器提供原 ...
WordPress插件 WP Audio Player 全HTML5支持音乐视频播放器插件[更新至v6.0]
WP Audio Player 是一款WordPress插件,简单的操作就可以让你的网站瞬间变成一个多媒体的站点,功能齐全的音频/视频播放器.已经制作了5个自定义皮肤和响应布局.在移动设备上能完美工作 ...
js控制audio音量_js控制html5 audio音频暂停播放
js控制html5 audio音频暂停播放音乐控制音乐播放/暂停重新播放 function rbf(){ var audio = document.getElementById('music1 ...

HTML5多媒体（音频、视频播放）

HTML5多媒体

HTML5多媒体

音频播放

视频播放

多文件播放

音频播放器

视频播放器

视频播放器

HTML5多媒体（音频、视频播放）相关推荐

最新文章

热门文章