标签：control 易用 image js对象 load nbsp info span 格式
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 也可以引入
html5 新增媒体标签详解 <audio>音频 <vedio> 视频 <source> <canvas> 标记定义图片<embed> 标记定义外部可交互内容或者插件 标记定义图片媒体资源
标签：control 易用 image js对象 load nbsp info span 格式
原文地址：https://www.cnblogs.com/tongcharge/p/11523524.html
