html5 新增媒体标签详解 <audio>音频 <vedio> 视频 <source> <canvas> 标记定义图片<embed> 标记定义外部可交互内容或者插件 标记定义图片媒体资源

html5 变得更加简洁易用，新增了不少结构标签 比如<article> 标记一篇文章   <header> 定义头部 <footer> 定义底部  <nav> 定义导航  <section> 定义一个区域  <aside> 定义侧边栏 <hgroup> 标记定义文件夹一个区块的相关信息 

同时也新增了 <audio><vedio><source>  下面我们就来详细的讲解一下这三个媒体标签的作用，

<audio> 音频标签

 

　　

<div>
        <audio src="./image/YourBody.mp3"  id="music" autoplay="autoplay" controls="controls" loop="3">
            您的浏览器不支持播放音乐
        </audio>
    </div>
    <div id="player"> 点我播放</div>


<script>

   $("#player").bind("click",function () {
       let uploadMusic = $("#music")[0]; /*jquery对象转换成js对象*/
       if (uploadMusic.paused) {
           /*如果已经暂停*/
           uploadMusic.play();/*播放*/
       } else {
           uploadMusic.pause();/*暂停*/
       }
   });
</script>

 

 

 如上所示 <audio> 标签 中  autoplay 是是否自动播放     controls=是显示控制面板，loop是播放完成后循环几次

 标签里加了id 表示可以通过js来控制音频播放，js代码如上。

如果不加control 音频则无法播放，即使设置了自动播放也不起作用

实际效果如下 

 

 

 但是我们的音乐后缀又不仅仅是 。MP3 有很多种格式 ， 这个时候就要加另外一个标签了 如下 

 

<audio autoplay="autoplay" controls="controls">
    <source type="audio/mpeg" src="image/YourBody.mp3">
</audio>

 

 

 <video>  视频标签

<video src="./image/china%20blue.mkv" controls="controls" autoplay="autoplay"></video>

  与 <radio>    大同小异

  实际效果 如下 

 

 

可以添加宽度和高度 以及多种解码方式 

<video  controls="controls" width="" height="">
    <source src="image/china%20blue.mkv" type="video/mp4">
</video>

当然需要自定义播放控制栏 这个是需要js参与的。

 

<embed   src      width   height >  可以加载flash文件   svg   也可以引入