播放视频、音乐
参考:https://www.runoob.com/html/html5-video.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>脚本</title>
<style type="text/css">
#div1 {
width: 350px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<!-- <canvas ID="myCanvas" width="820" height="620" style="background-color: blanchedalmond;">
你的浏览器不支持
</canvas> -->
<script type="text/javascript">
var ctx;
var MAX = 60;
var tick = 1000 / MAX;
var gCount = 0;
function angle2radian(angle) {
return angle / 180 * Math.PI;
}
function drawNetLines() {
var c = document.getElementById('myCanvas');
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.clientWidth, c.clientHeight);
INTERVAL = 100;
COUNT_ROW = c.clientHeight / INTERVAL;
COUNT_COL = c.clientWidth / INTERVAL;
for (row = 0; row < COUNT_ROW; row++) {
ctx.save();
ctx.beginPath();
ctx.setLineDash([5]);
ctx.moveTo(0, row * INTERVAL);
ctx.lineTo(c.clientWidth, row * INTERVAL);
ctx.stroke();
ctx.fillStyle = "#FF0000";
ctx.fillText(String(row * INTERVAL), 10, row * INTERVAL);
ctx.restore();
}
for (col = 0; col < COUNT_COL; col++) {
ctx.save();
ctx.beginPath();
ctx.setLineDash([5]);
ctx.moveTo(col * INTERVAL, 0);
ctx.lineTo(col * INTERVAL, c.clientHeight);
ctx.stroke();
ctx.fillStyle = "#ff0000";
col != 0 && ctx.fillText(String(col * INTERVAL), col * INTERVAL, 10)
ctx.restore();
}
}
</script>
<audio width="500" height="300" controls>
<source src="pic/0002.mp3" type="audio/mpeg">
</audio>
<video width="500" height="300" controls>
<source src="pic/dishu.mp4" type="video/mp4">
</video>
</body>
</html>
结果: