4. 网页多媒体

多媒体 embed（会使用）

embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>

4.1. 音频

  • 定义音频播放组件
<audio src="要播放的音频文件"></audio>

4.2. 视频

  • 定义播放视频组件
<video src="要播放的视频文件"></video>

4.3. 旧版本浏览器提示

  • 如果HTML中遇到不能识别的标签，就会将该标签当做DIV(块级元素)
  • 那么video中的innerHTML也就会直接显示在界面上
  • 利用这个特点我们可以实现不支持video标签的浏览器提示
<video src="demo.mp4"><!-- 如果浏览器不识别video标签，以下内容可以直接显示在浏览器上 --><p>抱歉，您的浏览器不支持视频播放！</p>
</video>

4.4. 格式兼容

  • 每个浏览器的音视频格式支持不同（版权问题）
  • 需要兼容更多的浏览器，可以通过定义多个<source>的方式实现
  • html解析过程中会找其中第一个能认识的格式播放，一旦找到认识的视频格式，就不会再往后找了
<video controls width="500"><!-- 分析第一个source格式是否支持，如果支持则加载该文件，不支持继续往下解析 --><source src="chrome.mp4"><source src="chrome.ogv"><source src="chrome.webm"><p>抱歉，您的浏览器不支持视频播放！</p>
</video>
  • 因此不管是audio还是video都不要直接设置标签的src

4.5. 多媒体标签属性

属性 含义
controls 决定是否显示控制菜单
autoplay 自动播放
loop 循环播放
height/width 定义播放器的宽高，只会在视频标签中生效
preload 预加载 是否在页面加载完成并且没有开始播放时就开始加载文件，如果有自动播放属性则该属性无意义

4.6. 自定义播放器外观

  1. 隐藏原生的控制菜单，也就是删除标签中的controls属性
  2. 自己设计一套界面控制元素，比如播放按钮，音量控制开关之类
  3. 为每个不同的控制元素注册对应的事件
  4. 在事件中通过视频元素的API实现自定义播放器的效果
  5. 具体的多媒体元素API表：

4.6.1. 方法

方法 描述
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频类型
load() 重新加载音频/视频元素
play() 开始播放音频/视频
pause() 暂停当前播放的音频/视频

4.6.2. 属性

属性 描述
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
duration 返回当前音频/视频的长度（以秒计）
ended 返回音频/视频的播放是否已结束
error 返回表示音频/视频错误状态的 MediaError 对象
loop 设置或返回音频/视频是否应在结束时重新播放
mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted 设置或返回音频/视频是否静音
networkState 返回音频/视频的当前网络状态
paused 设置或返回音频/视频是否暂停
playbackRate 设置或返回音频/视频播放的速度
played 返回表示音频/视频已播放部分的 TimeRanges 对象
preload 设置或返回音频/视频是否应该在页面加载后进行加载
readyState 返回音频/视频当前的就绪状态
seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking 返回用户是否正在音频/视频中进行查找
src 设置或返回音频/视频元素的当前来源
startDate 返回表示当前时间偏移的 Date 对象
textTracks 返回表示可用文本轨道的 TextTrackList 对象
videoTracks 返回表示可用视频轨道的 VideoTrackList 对象
volume 设置或返回音频/视频的音量

4.6.3. 事件

事件 描述
abort 当音频/视频的加载已放弃时
canplay 当浏览器可以播放音频/视频时
canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange 当音频/视频的时长已更改时
emptied 当目前的播放列表为空时
ended 当目前的播放列表已结束时
error 当在音频/视频加载期间发生错误时
loadeddata 当浏览器已加载音频/视频的当前帧时
loadedmetadata 当浏览器已加载音频/视频的元数据时
loadstart 当浏览器开始查找音频/视频时
pause 当音频/视频已暂停时
play 当音频/视频已开始或不再暂停时
playing 当音频/视频在已因缓冲而暂停或停止后已就绪时
progress 当浏览器正在下载音频/视频时
ratechange 当音频/视频的播放速度已更改时
seeked 当用户已移动/跳跃到音频/视频中的新位置时
seeking 当用户开始移动/跳跃到音频/视频中的新位置时
stalled 当浏览器尝试获取媒体数据，但数据不可用时
suspend 当浏览器刻意不获取媒体数据时
timeupdate 当目前的播放位置已更改时
volumechange 当音量已更改时
waiting 当视频由于需要缓冲下一帧而停止 
// 获取界面上的video元素，所有的操作必须通过它实现
var video = document.getElementById('video');
var btn_play = document.getElementById('btn_play');
// 注册点击事件
// addEventListener 用于注册事件， 将事件属性的on去掉 作为第一个参数传入
btn_play.addEventListener('click', function() {video.play();btn_play.disabled = true;btn_pause.disabled = false;
});
var btn_pause = document.getElementById('btn_pause');
btn_pause.addEventListener('click', function() {video.pause();btn_play.disabled = false;btn_pause.disabled = true;
});
var btn_muted = document.getElementById('btn_muted');
btn_muted.addEventListener('click', function() {// 交互变化true或falsevideo.muted = !video.muted;btn_muted.innerHTML = video.muted ? "取消静音" : "静音";
});
var volume = document.getElementById('volume');
volume.addEventListener('change', function(e) {// 拿一下当前volume的值video.volume = volume.value;
});
var btn_speed_up = document.getElementById('btn_speed_up');
btn_speed_up.addEventListener('click', function(e) {// 加速video.playbackRate += 0.1;
});
var btn_speed_down = document.getElementById('btn_speed_down');
btn_speed_down.addEventListener('click', function(e) {// 减速video.playbackRate -= 0.1;
});
var btn_forward = document.getElementById('btn_forward');
btn_forward.addEventListener('click', function(e) {// 前进5秒video.currentTime += 5;
});
var btn_back = document.getElementById('btn_back');
btn_back.addEventListener('click', function(e) {// 后退5秒video.currentTime -= 5;
});// 注册视频播放状态变化事件
video.addEventListener('timeupdate', function() {// console.log(1111);progress.value = (video.currentTime / video.duration) * 100;
});

4.7. 全屏 API

  • HTML5中提供了可以通过JS实现网页全屏的效果
  • 具体的方式就是通过特定元素的requestFullScreen方法实现
  • 由于在不同浏览器中该方法需要加上特定前缀
  • 退出全屏通过exitFullScreen方法
// 全屏
function fullScreen(element) {if (element.requestFullScreen) {element.requestFullScreen();} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.oRequestFullScreen) {element.oRequestFullScreen()} else if (element.msRequestFullScreen) {element.msRequestFullScreen()}
}
var btnFullScreen = document.getElementById('btn_fullscreen');
btnFullScreen.addEventListener('click', function() {fullScreen(video);// fullScreen(document.body);
});

4.8. SVG 了解*

  1. iframe的作用就是在网页中挖个坑，在这个坑里再展示一个页面
  2. svg本身也是文档 所以可以使用iframe的方式载入

HTML5网页多媒体（ 音频，视频，旧版本浏览器提示，格式兼容，多媒体标签属性）相关推荐

  1. android语音播放工具类,Android开发之MediaPlayer多媒体(音频,视频)播放工具类

    本文实例讲述了Android开发之MediaPlayer多媒体(音频,视频)播放工具类.分享给大家供大家参考,具体如下: package com.android.imooc.chat; import ...

  2. 两个mp3文件合成 php,两个音频合成一个 音频合成软件/音频视频合成软件合并不同格式为一个音频文件...

    怎么将两个音频合成一个音频文件,嗯~ o(*￣▽￣*)o ,又是一个老生常谈的话题,但既然是提到了自然是再给大伙演示一下,那就使用一个比较简单的音频合成软件/音频视频合成软件合并不同格式为一个音频文件 ...

  3. html5视频播放怎么结束,html5设置或返回音频/视频是否应该在结束时再次播放的属性loop...

    实例 将视频设置为循环播放:myVid=document.getElementById("video1");myVid.loop=true; 定义和用法 loop 属性设置或返回音 ...

  4. HTML5媒体（音频/视频）

    摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...

  5. 解决html5语意标签在IE低版本浏览器下的兼容问题：

    方法一:手动改写. 1.在body中写入h5语意标签,这里用nav标签举例子:<nav></nav> 2.在js中手动创建h5的语意标签:document.createElem ...

  6. html来自网页的消息,win7系统ie浏览器提示：来自网页的消息的解决方法

    无论谁在使用电脑的时候都可能会发现ie浏览器提示:来自网页的消息的问题,ie浏览器提示:来自网页的消息让用户们很苦恼,这是怎么回事呢,ie浏览器提示:来自网页的消息有什么简便的处理方式呢,其实只要依照 ...

  7. html5网页怎么自动下滑动,360浏览器在浏览网页时自动下滑怎么办 360浏览器在浏览网页时自动下滑解决方式一览...

    最近,小编在使用360浏览器浏览网页的时候,有时候会出现网页自动往下滑,用鼠标拉也拉不回去,网页依然往下滑,那么,电脑网页打开浏览器就自动往下滑是怎么回事?遇到这个问题该怎么办?那么现在小编就给大家讲 ...

  8. Bilibili 网页版下载视频 B站下载MP4格式视频（不用下载工具）

    博主是为了给家里老人下载戏曲,一开始是单个单个解析然后下载,想多下载一些,然后用了批量方法下载很好用 通过网页版解析工具 解析单个视频 获得下载地址 复制视播放地址,如,复制播放视频时,上方的地址 然 ...

  9. 解决网页百度地图API在UC浏览器上不兼容情况

    百度地图api网页端使用UC浏览器开启鼠标滚轮放大缩小功能时候会出现页面滚动问题 在script中加入: document.onmousewheel=function (e) {e= e || win ...

  10. 亲测成功解决Typora旧版本无法使用提示需要更新的问题

    参考视频:[typora]This beta version of Typora is expired 解决方法之一_哔哩哔哩_bilibili *使用视频方法可以成功使用,但是一开始我改了typor ...

最新文章

  1. Jfinal集成Spring插件
  2. 【Network Security！】虚拟化架构与系统部署
  3. 西门子S7以太网通讯协议
  4. Nginx + CGI/FastCGI + C/Cpp（编不过去，不搞了。。。）（Common Gateway Interface）
  5. 008 selenium html报告
  6. 【Revit API】调用Revit内部命令PostableCommand
  7. 评论python编码文章《立即停止使用 setdefaultencoding('utf-8')， 以及为什么》
  8. 前台文件PHP完善步骤,ThinkPHP使用步骤
  9. 一篇文章弄懂 JavaScript 中的 import
  10. ElasticSearch基础之批量操作(mget+mbulk)
  11. 51NOD-1028 大数乘法V2【大数】
  12. svn之回滚到指定版本
  13. java 微信 图灵机器人_使用图灵api创建微信聊天机器人
  14. 【IT之路】连接MySQL遇到ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor:yes)问题
  15. wps云盘和zotero的结合（一）
  16. 02、alex 说过“普通运维人员就是秋后的蚂蚱”
  17. Python爬虫初级（十一）—— Selenium 详解
  18. 基于电商直播SDK快速实现一个淘宝直播APP【内附源码】
  19. 雷电2接口_中国连城 | 总结关于USB、TypeC、雷电接口的冷知识
  20. 以太网通信连接不上自检步骤

热门文章

  1. 视觉测量—结构光标定1
  2. JAVA：代码实现zip压缩
  3. T Day-1 星空之夜
  4. Yate软交换机IPPBX与电话语音网关的初步配合
  5. IP地址和mac地址的区别
  6. 通过Redis入侵服务器
  7. matlab z变换 差分,matlab z变换
  8. 论文发表费用一般是多少
  9. jdk版本问题：hour_day_of 0 -1
  10. 免费客户旅程(Customer Journey Mapping) 示例总汇