html HTML5：视频，音频，画布

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html HTML5：视频，音频，画布相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<video controls width="800" poster="images/img1.jpg">
    <source src="настройка%20openserver%20xdebug%20phpstorm.mp4">
</video>
<hr style="border: 5px solid red;">
<audio controls>
    <source src="Slipknot%20-%20My%20Plague.mp3">
</audio>
<hr style="border: 5px solid red;">
<section>
    <canvas width="600" height="600" id="img"></canvas>
</section>
<script>
    let ctx = document.getElementById('img').getContext('2d');

    ctx.fillStyle = '#49ffee';
    ctx.fillRect(20, 20, 250, 300);

    ctx.lineWidth = 10;
    ctx.strokeStyle = '#bb35d4';
    ctx.strokeRect(350, 450, 200, 50);

    ctx.beginPath();
    ctx.moveTo(170, 190);
    ctx.lineTo(290, 412);
    ctx.lineTo(290, 312);
    ctx.lineTo(190, 312);
    ctx.closePath();
    ctx.stroke();
</script>
</body>
</html>

以上是关于html HTML5：视频，音频，画布的主要内容，如果未能解决你的问题，请参考以下文章

如何从HTML5网络视频生成音频波形？

HTML5：在带有控件的视频上放置画布

html5：在画布内显示视频

html5：在画布内显示视频

MediaStream 同时捕获画布和音频

HTML5 drawimage 从视频到画布