html5播放视频音乐

最新推荐文章于 2023-08-27 18:49:39 发布

水星灭绝

最新推荐文章于 2023-08-27 18:49:39 发布

阅读量154

点赞数

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/108732041

版权

前端同时被 2 个专栏收录

137 篇文章 0 订阅

订阅专栏

121 篇文章 3 订阅

订阅专栏

播放视频、音乐

参考：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>

结果：