audio标签HOVER效果rgba和opacity隐藏场景

Posted 2021-03-19 housheng

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)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3. touchend事件：当手指从屏幕上离开的时候触发。
4. 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与元素的显隐

1. 继承性

• 父元素设置visibility:hidden，子元素也继承了该属性，也是看不见的
• 不过本质区别在于，父元素设置了hidden后，子元素设置visible后，子元素是可以被看都的
• 这点父元素设置了display:none，子元素就永远看不到了

1. 与css计数器
   visibility:hidden虽然让元素不可见了，但是不影响其计数效果，不会重新计算结果
2. 与transition
   设置了visibility:hidden的元素，可以很好的展现transition过渡效果
   这是因为transition支持的css属性中有visibility
3. 与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>