前端多媒体相关

音频播放

点击试试：

其中controls="controls"表示添加标准的控件，该标准控件依赖于浏览器

<audio src="img/老街旧友故事和酒.mp3" controls="controls">音频播放失败</audio>

属性补充

自动播放（部分浏览器不支持，测试谷歌浏览器不支持，360浏览器可用）

autoplay="autoplay"

在音频结束后自动重新播放

<audio autoplay="autoplay" loop="loop">
 <source src="img/do.mp3" />
</audio>

自定义播放/暂停按钮：

<p>播放歌曲》》》</p>
<audio src="img/老街旧友故事和酒.mp3">音频播放失败</audio>
<button onClick="display()">播放/暂停</button>
<script>
var audioobj=document.getElementsByTagName("audio")[0];
function display(){
    //判断音乐是否是暂停
    if(audioobj.paused) audioobj.play();
    else audioobj.pause();
}    
</script>

视频播放

<p>播放视频》》》</p>
<video controls="controls" width="500px" height="300px" >
    <source src="img/vivi.mov" />
    <source src="img/do.mp4" />
    视频播放失败
</video>

属性补充

音频属性均有，所以不在赘述

document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas>    "
var canobjx=document.getElementById("canid");
resto=canobjx.getContext("2d");
resto.fillStyle="#FF00FF";//设置颜色
//resto.rotate(1);//旋转，参数（角度）
resto.translate(300,100);//移动
resto.scale(2,1);//缩放
resto.fillRect(0,100,200,300);//填充矩形，参数（左上坐标，宽高）

 静音播放，部分浏览器实现自动播放需添加静音

muted="muted"

设置播放前显示的图片

poster="https://img2018.cnblogs.com/blog/....png"

绘制相关

绘制形状

document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas>    "
var canobjx=document.getElementById("canid");
resto=canobjx.getContext("2d");
resto.fillStyle="#FF00FF";//设置颜色
//resto.rotate(1);//旋转，参数（角度）
resto.translate(300,100);//移动
resto.scale(2,1);//缩放
resto.fillRect(0,100,200,300);//填充矩形，参数（左上坐标，宽高）

绘制图片

document.body.innerHTML="<canvas id="canid" width="1000px" height="1900px"></canvas>    "
var canobjx=document.getElementById("canid");
resto=canobjx.getContext("2d");
var imgx=new Image();
imgx.src="img/0.jpg";
imgx.onload=function(){
    resto.drawImage(imgx,100,200);//参数（图片对象，x,y)
}

---