HTML5的audio定义音频流
HTML5里引入的新标记 <audio> 和 <video> 实现了HTML对视频播放和音频播放的原生支持，有了这种原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，而直接能将视频/音频嵌入到了网页中。
<audio> 和 <video> 两个标记上控制属性的含义：
- controls : 显示标准的 HTML5 视频/音频播放器控制条、控制按钮。
- autoplay : 让文件自动播放。
- loop : 让文件循环播放。
preload 属性是用来缓存大体积文件的。它有三个可选值：
- "none" 不缓存
- "auto" 缓存
- "metadata" 只缓存文件元信息
为了能够兼容各种浏览器对不同媒体类型的支持，我们可以用多个 <source> 元素来提供多个不同的媒体类型。
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>持Ogg格式视频流的浏览器可以播放 Ogg 文件。如果不支持，可以播放 MPEG-4 文件。
我们还可以指定播放使用的解码器(codecs); 这样就可以更精确的让浏览器如何播放提供的视频：
<video controls>
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
Your browser does not support the <code>video</code> element.
</video>上面，我们指定了这个视频需要使用 Dirac 和 Speex 解码器。如果浏览器支持 Ogg 格式，但没有指定的解码器，那么，视频将不会被加载。
如果没有提供 type 属性，则浏览器会向服务器询问媒体类型，看看是否支持；如果不支持，浏览器将会去检查下一个 source 属性
用JavaScript控制视频/音频播放
用JavaScript可控制HTML5视频播放器实现播放、暂停、快进，快退、音量等。
<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').play()">播放</button>
<button onclick="document.getElementById('demo').pause()">暂停</button>
<button onclick="document.getElementById('demo').volume+=0.1">降低音量</button>
<button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
</div> 停止下载视频文件
虽然我们可以使用pause()方法里让视频文件停止播放，但浏览器并未停止下载媒体文件，除非它达到了一定的缓存量。
下面是让浏览器如何停止下载视频文件的方法：
var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//或
mediaElement.removeAttribute("src");通过删除 src 属性(或者设置为空值)，这样就能停止文件的网络下载。
设定播放的时间点定位
我们可以指定视频从某时某分某秒开始播放，这是通过设置 currentTime 属性来实现。
我们可以通过 seekable 属性来获得视频有效的播放时间范围。它会返回一个 TimeRanges 对象，能够告诉你有效的开始时间和结束时间。
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0); // 返回开始时间 (秒)
mediaElement.seekable.end(0); // 返回结束时间 (秒)
mediaElement.currentTime = 122; // 定位到第 122 秒播放
mediaElement.played.end(0); // 返回已经播放的时间长度(秒):hover
:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前
:hover伪类可以任何伪元素上使用
但是需要注意: 在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。 可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。
CSS半透明效果的属性和场景
在CSS中与半透明效果相关的属性有两个：opacity和rgba。
opacity属性的值规定透明度。从 0.0 （完全透明）到 1.0（完全不透明）。设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度。
rgba用于设置颜色的透明度，参数是rgba(red, green, blue, alpha) alpha的取值从 0（完全透明） 到 1（完全不透明），如rgba(255,255,255,0.8)。
深度思考
如果是在手机上查看，没有HOVER效果时应该怎么办？
手机端没有hover特效，当你点击的时候就直接触发click.
：hover在Android系统上点击会出现， 但是需要再次点击才会消失；IOS系统上点击无法出现
手机虽然没有鼠标，但是有触摸事件
触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。
- touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
- touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
- touchend事件：当手指从屏幕上离开的时候触发。
- touchcancel事件：touchcancel，是在拖动中断时候触发。
rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？
rgba是什么：
RGB（Red（红色） Green（绿色） Blue（蓝色））的基础上增加了一个通道Alpha。
Alpha参数为透明值，在0~1之间。RGBa 扩展了 RGB的颜色
rgba（）是css中设置背景颜色中的一个属性。
Opasity是什么：
opacity属性设置一个元素的透明度级别。
opacity是css的一个属性，取值0~1，0为完全透明，1为完全不透明。默认是继承父元素opacity属性，所以子元素会继承父元素的opacity属性值，从而产生相同的效果
区别是什么：
rgba（ ）的作用对象是元素的背景颜色或元素的颜色，其对象的子元素不能够继承它的透明度；
opacity的作用对象是元素，以及元素的所有内容，并且其子元素能够继承它的透明度
display和visibility
display:none与元素的显隐
当元素设置display:none后，界面上将不会显示该元素，并且该元素不占布局空间（影响布局），但我们仍然可以通过JavaScript操作该元素。
display如果值为none，则该元素以及所有后代元素都隐藏，反之如果值是非none的情况，则都为显示了
none做到了无法点击、无法使用屏幕阅读器等辅助设备访问，不占空间
display: none的元素的background-image图片根据不同浏览器的情况加载情况不一
- 在Firefox浏览器下，display:none的background-image图片不加载，包括父元素display:none也是如此
- 在Chrome和Safari浏览器，则根据父元素是否是否为none来影响图片加载情况，父元素带有display:none，图片不加载。父元素不带有display:none,而自身有背景图元素带的话，那也照样加载
- 在IE浏览器下，无论怎么搞都会请求图片资源
visibility与元素的显隐
- 继承性
- 父元素设置visibility:hidden，子元素也继承了该属性，也是看不见的
- 不过本质区别在于，父元素设置了hidden后，子元素设置visible后，子元素是可以被看都的
- 这点父元素设置了display:none，子元素就永远看不到了
- 与css计数器
visibility:hidden虽然让元素不可见了，但是不影响其计数效果，不会重新计算结果 - 与transition
设置了visibility:hidden的元素，可以很好的展现transition过渡效果
这是因为transition支持的css属性中有visibility - 与JS
visibility:hidden除了对transition友好外，对js来说也很友好
在实际开发中，需要对隐藏元素进行尺寸和位置的获取，来实现布局精确定位的交互
此时，就建议使用visibility:hidden
比较好的隐藏场景
- 不占空间，不渲染 使用
script<script type="text/html">
<script type="text/html">
<!-- 图片是不会发送请求的 -->
<img src="1.jpg" />
<!-- 如果想嵌套需要借助textarea了 -->
<textarea style="display: none;">
<img src="2.png" />
</textarea>
</script>- 不占空间，资源可以加载，DOM可访问 使用
display:none
<div id="box">成都</div>
<script>
let oBox = document.getElementById('box');
console.log(oBox); // <div id="box">成都</div>
</script>- 不占空间，隐藏显示时有transition效果
.hidden {
position: absolute;
visibility: hidden;
}
<div class="div hidden">一杯敬朝阳 一杯敬月光</div>- 占空间，不能点击 visibility: hidden
.vh {
visibility: hidden;
}- 不占空间，不能点击，键盘能访问 clip裁切
.out {
position: relative;
left: -999em;
}
.clip {
position: absolute;
clip: rect(0, 0, 0, 0);
}
<div class="clip">
<div class="out">青花瓷</div>
</div>- 占空间，不能点击，键盘能访问 relative
<div style="position: relative;top: -999em;">狮子座</div>- 占空间，可以点击 opacity
<div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>
- 隐藏文字 使用text-indent
<p style="text-indent: -999999px;">天下无双</p>原文地址：https://www.cnblogs.com/housheng/p/12109674.html