有时候经常会在网站上面放一些音频和视频。
多媒体标签
embed:标签定义潜入的内容
audio:播放音频
video:播放音频
在本地是不提倡放视频的,用手机录视频会很大,而网站的容量是有限的。网站上传到服务器上是很贵的。1个G就要几百块钱。拍3-5个小视频就满了。
最常用的是把视频传到优酷上面,然后去调用优酷里面的地址。这样既不占用网站的空间,又能显示视频,一举两得。
多媒体embed
在优酷上找个视频。然后复制他的通用代码。
把代码复制到html中的body中,就可以。
不过这个是有优酷的广告的。
播放音频audio
就相当于背景音乐。
直接在代码body中加入<audio src=""></audio>
这个默认的是不自动播放的。自动播放的话就是加个autoplay属性。这个autoplay也可以向前面的属性一样,用两种方式。一个是直接加<audio src="" autoplay></audio>
还有一个是<audio src="" autoplay="autoplay"></audio>
使用controls来控制。效果如下图:(可以控制播不播放,还有音量的大小)
使用loop属性可以循环播放。loop=“2"就是循环两次播放,… 当loop=”-1"或者是直接写个loop时时,就是无限循环播放。
这个小节第一张图就是兼容问题。可以把一个音频转换成3个格式。把3个格式都加上去,就都可以播放。
为了浏览器兼容,需要做三种。其实做两种就可以 ,一个是ogg,一个是MP3.
多浏览器支持的方案,如下图:
播放视频video
H5通过标签来解决音频播放的问题。语法格式如下:
<video src="" ></video>
通过附加属性可以更友好的控制视频的播放。
代码实例如下: