平凡前端之路_03.HTML5的音频视频多媒体
文章目录
- HTML5音频视频
- HTML5音频
- HTML5视频
- HTML5音频视频常用属性
- HTML5音频视频常用方法
- HTML5音频视频常用事件
- HTML5音频视频特殊属性
- 浏览器不支持音频视频自动播放的解决方案
- HTML5自适应的图片策略
- ~~使用srcset+sizes的切换解决方案~~
- HTML5 picture 标签
- HTML 知识题
HTML5音频视频
| # | |
|---|---|
| 1 | 在 HTML 中播放音频视频并不容易！ |
| 2 | 直到现在，仍然不存在一项旨在网页上显示音频视频的标准。大多数音频视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 |
| 3 | windows平台的IE浏览器利用Activex控件来播放flash,而其它的浏览器则使用Netscape插件技术来播放flash。 |
| 4 | 而在HTML5 中规定了一种通过 audio/video 元素来包含音频视频的标准方法 |
HTML5音频
| # | 兼容性 |
|---|---|
| 1 | Safari、Chrome、Opera和Firefox不能自动播放，需要一个页面元素上的交互 |
| 2 | width / height 属性没有作用，必须使用 style 标签里面的样式去控制它 |
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | NO | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | NO | YES | YES |
HTML5视频
| # | 兼容性 |
|---|---|
| 1 | Safari、Chrome、Opera和Firefox不能自动播放，需要一个页面元素上的交互 |
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | 9+ | YES | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | NO | YES | YES |
| Safari 5+ | YES | NO | NO |
| Opera 10.6+ | NO | YES | YES |
HTML5音频视频常用属性
| 属性 | 描述 |
|---|---|
| src | 设置或返回音视频的多媒体资源的值。 |
| autoplay | 设置或返回是否在就绪（加载完成）后随即播放音视频。 |
| controls | 设置或返回音视频是否应该显示控件（比如播放/暂停等）。 |
| loop | 设置或返回音视频是否应在结束时再次播放。 |
| width | 设置或返回音视频的 高度属性的值（音频的width没有作用，必须使用 style 标签里面的样式去控制）。 |
| height | 设置或返回音视频的 宽度属性的值（音频的width没有作用，必须使用 style 标签里面的样式去控制）。 |
| poster | 设置或返回 视频 的 海报封面属性的值。 |
| muted | 设置或返回音视频是否关闭声音。 |
| currentTime | 设置或返回音视频中的当前播放位置（以秒计） |
| duration | 返回当前音频/视频的长度（以秒计） |
| paused | 设置或返回音视频是否暂停 |
| preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
| volume | 设置或返回音频/视频的音量（0~1） |
| playbackRate | 设置或返回音频/视频播放的速度（大于1快播 小于1慢放） |
HTML5音频视频常用方法
| 方法 | 描述 |
|---|---|
| load() | 重新加载音频/视频元素 |
| play() | 开始播放音频/视频 |
| pause() | 暂停当前播放的音频/视频 |
HTML5音频视频常用事件
| 事件 | 描述 |
|---|---|
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或不再暂停时 |
| playing | 当音频/视频在已因缓冲而暂停或停止后已就绪时 |
HTML5音频视频特殊属性
| 属性 | 描述 |
|---|---|
| controlsList（有兼容问题） | 设置或返回 不 显示指定控件。枚举值有（nofullscreen：不显示全屏控件，nodownload：不显示下载控件， noremoteplayback：不显示远程回放控件） |
浏览器不支持音频视频自动播放的解决方案
| # | 解决方案 |
|---|---|
| 1 | 在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default”，修改为 “No user gesture is required” |
| 2 | muted静音的自动播放总是被允许的。 |
| 3 | 用户已经产生交互（点击触摸滑动等…） ，而不是说一定要用户点击audio或者video去播放 |
HTML5自适应的图片策略
让浏览器能自动调节图片尺寸。
- 分辨率切换：小屏手机屏幕上显示网页，那么没有必要在网页上嵌入pc端的大图片，浪费带宽。
- 艺术方向：当网站在狭窄的屏幕上观看时，显示一幅包含了重要细节的裁剪版图片，而不是显示pc端的大图，这样会显得图片缩小，重要地方不突出。
使用srcset+sizes的切换解决方案
img 元素的srcset+sizes提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset 属性定义了我们允许浏览器选择的图像集合，浏览器可以根据宽、高和像素密度来加载相应的图片资源。
使用srcset的宽度描述符时需要sizes属性。
* srcset语法: “图片路径 物理像素, 图片路径 物理像素, …”
* size: “媒体查询 css像素”
* src: 当浏览器不支持上面的属性的时候，默认加载这里
检查sizes列表中哪个媒体条件是第一个为真
加载srcset列表中引用的最接近所选的槽大小的图像
//<img
// srcset="big-1400w.jpg 1440w,
// middle-1000w.jpg 1000w,
// small.jpg 750px"
// sizes="(max-width: 1920px) 1440px,// (max-width: 1200px) 1000px,
// 750px"
// src="small.jpg " alt=""
///>
HTML5 picture 标签
HTML5 的 <picture> 元素可以设置多张图片。
<picture> 元素类似于 <video> 和 <audio> 元素。可以设备不同的资源，第一个设置的资源为首选使用的：
- srcset 属性的必须的，定义了图片资源。
- media 属性是可选的。
- source当中的也可以使用srcset、sizes属性。
- 必须提供一个img元素，以备浏览器不支持的时候使用。
<picture><source media="(max-width: 799px)" srcset="img_smallflower.jpg" ><source media="(min-width: 800px)" srcset="img_flowers.jpg"><img src="img_flowers.jpg" alt="Flowers">
</picture>
把本来给手机用的图片作为 src ，其他放在 srcset 里面，因为电脑上浏览器没啥问题（不带 IE ）
HTML 知识题
| 题目 | 答案 |
|---|---|
| HTML5不支持的视频格式 | flv |
| Canvas 用于填充颜色的属性 | fillStyle |
| HTML中注释的写法 | <!-- code–> |
| Canvas不依赖分辨率 | 错误 |
| HTML5 之前的 HTML 版本 | HTML 4.01 |
| 建立一个有序列表 | <ol></ol> |
| <a>链接的目标属性值 | _self、_blank、_top |
| 可以在html页面中显示“<” | < |
| 表格中行的开始和结束标记 | <tr></tr> |
平凡前端之路_03.HTML5的音频视频多媒体相关推荐
- 平凡前端之路_05.CSS与CSS3
文章目录 什么是CSS? CSS 发展 什么是CSS3? CSS3 新特性 插入样式表 外部样式表 内部样式表 内联样式 多重样式表优先级 CSS 语法 选择器 声明 属性 属性的值 样式层叠 样式继 ...
- Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
- 学习web前端要了解的HTML5知识有哪些?
今天要跟大家分享的文章是关于学习web前端要了解的HTML5知识有哪些?随着智能手机.平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长.H5开始火热起来,以文字.图片.动画.声音等相结 ...
- 前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签 标签名 描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
- 【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程 学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
- 第24课 《前端之路，以不变应万变》
今天的内容有些借鉴于业内大佬的内容,由于本人技术实在太渣,几乎没有可以用来演讲的素材.抱歉 大家好,我是来自存勖科技的Rocken.我今天演讲的内容是:前端的未来. 大家都知道,前端所依托的基础直到上 ...
- HTML5之音频audio知识（部分vedio）
2019独角兽企业重金招聘Python工程师标准>>> HTML总结(二)[HTML5之音频] HTML5重点知识之音频 audio标签兼容性: Internet Explorer ...
- 02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- js控制audio音量_js控制html5 audio音频暂停播放
js控制html5 audio音频暂停播放 音乐控制 音乐 播放/暂停 重新播放 function rbf(){ var audio = document.getElementById('music1 ...
最新文章
- 给定直角坐标上的两条线，确定这两条线会不会相交
- 点击某个a标签，禁止页面自动跳转到该页面的顶部
- 使用DOM操纵HTML文档几点粗浅认识
- php ini include,php.ini文件中的include_path设置
- python语言用什么关键字来声明一个类_Python语言和标准库（第三章：类和对象）...
- 如何判断数组所有数都不等于一个数_工程师编程，C语言学习，关于数组方面的一些总结...
- 【Golang】关于从切片中删除某个元素时会覆盖底层数组的说明
- UML及UML建模工具介绍
- paTJPSb桌趴缀岳凳钟涸
- 用opencv画一个笑脸的图像
- vtkImageCheckerboard生成棋盘格，跟随鼠标移动显示
- 第一行有一个整数，表示数字拼图个数 n。第二行有 n 个 整数，表示给出的 n 个数字拼图 上的数字ai。
- cmd del命令 文件删除
- 别说眼科医生不做近视激光手术，眼科医生做给你看
- python多功能文本编辑器_多功能高效 批处理式 Python IDE Python 编辑器 新时代新理念...
- 如何运用PMBOK这本书？ | 15年资深pm告诉你
- 2018年度中国存储市场影响力排行榜”榜单揭晓
- Python进阶篇---异常处理
- 如何让生产计划动态排程？秘诀在于生产排程管理系统
- P27 026字典：当索引不好用时1----20201005
热门文章
- 计算机课玩游戏检讨1000字,偷玩电脑检讨书作文
- 在线签名、canvas手写在线签名——小程序端实现在线签名，手写电子签名canvas
- jmeter与fiddler结合使用
- php头条视频提取,Node如何实现批量爬取头条视频并保存（代码实现）
- java毕业设计汽车维修管理系统（附源码、数据库）
- 美通社持续加强亚太地区新闻发布网络
- REMOTE_LOGIN_PASSWORDFILE参数和ORAPW密码文件
- 发送二进制短信时出现的问题，希望大家指点
- 【正点原子FPGA连载】第二章 实验平台简介 -摘自【正点原子】领航者ZYNQ之FPGA开发指南_V2.0
- 北京公办计算机专科学校,北京公办院校有计算机专业的全日制自考学校有哪些...