HSdiana 2019-12-27
HTML5里引入的新标记 <audio>
和 <video>
实现了HTML对视频播放和音频播放的原生支持,有了这种原生的HTML5视频播放器/音频播放器,我们不再需要flash技术,而直接能将视频/音频嵌入到了网页中。
<audio>
和 <video>
两个标记上控制属性的含义:<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 文件。
<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 属性
<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
伪类表现不同。 可能从不会触发;或者在触摸某元素后触发了一小会儿;或者总是触发即使用户不在触摸了,直到用户触摸别的元素。
opacity属性的值规定透明度。从 0.0 (完全透明)到 1.0(完全不透明)。设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度。
rgba用于设置颜色的透明度,参数是rgba(red, green, blue, alpha) alpha的取值从 0(完全透明) 到 1(完全不透明),如rgba(255,255,255,0.8)。
手机端没有hover特效,当你点击的时候就直接触发click.
:hover在Android系统上点击会出现, 但是需要再次点击才会消失;IOS系统上点击无法出现
触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。
RGB(Red(红色) Green(绿色) Blue(蓝色))的基础上增加了一个通道Alpha。
Alpha参数为透明值,在0~1之间。RGBa 扩展了 RGB的颜色
rgba()是css中设置背景颜色中的一个属性。
opacity属性设置一个元素的透明度级别。
opacity是css的一个属性,取值0~1,0为完全透明,1为完全不透明。默认是继承父元素opacity属性,所以子元素会继承父元素的opacity属性值,从而产生相同的效果
rgba( )的作用对象是元素的背景颜色或元素的颜色,其对象的子元素不能够继承它的透明度;
opacity的作用对象是元素,以及元素的所有内容,并且其子元素能够继承它的透明度
当元素设置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浏览器下,无论怎么搞都会请求图片资源
比较好的隐藏场景
script<script type="text/html">
<script type="text/html"> <!-- 图片是不会发送请求的 --> <img src="1.jpg" /> <!-- 如果想嵌套需要借助textarea了 --> <textarea style="display: none;"> <img src="2.png" /> </textarea> </script>
display:none
<div id="box">成都</div> <script> let oBox = document.getElementById('box'); console.log(oBox); // <div id="box">成都</div> </script>
.hidden { position: absolute; visibility: hidden; } <div class="div hidden">一杯敬朝阳 一杯敬月光</div>
.vh { visibility: hidden; }
.out { position: relative; left: -999em; } .clip { position: absolute; clip: rect(0, 0, 0, 0); } <div class="clip"> <div class="out">青花瓷</div> </div>
<div style="position: relative;top: -999em;">狮子座</div>
<div style="opacity: 0; filter: alpha(opacity=0);">透明度</div>
<p style="text-indent: -999999px;">天下无双</p>
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q
示例一和示例二 参考尚硅谷老师的视频教程;window.AudioContext){alert("当前浏览器不支持哟!DOCTYPE html><html><head><meta charset="U
doctype html> HTML5使用UTF-8编码演示:。<meta charset="UTF-8">2.HTML5中如何嵌入音频?</audio>3.HTML5中如何嵌入视频?</video&
<section>跟<div>类似,也是默认换行。html5form表单新增的属性。html5input:不支持的浏览器就是普通的文本输入框text. <inputtype="search"/>输入搜