繪製視頻幀

時間 2019-12-04

標籤繪製視頻简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <video id="video" controls="" width="270" style="margin-top:15px;">
        <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
        <!-- <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
                <source src="/example/html5/mov_bbb.webm" type="video/webm"> -->
    </video>
    <canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3; margin-top:15px;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    
    <script>
        var v = document.getElementById("video");
        var c = document.getElementById("myCanvas");
        ctx = c.getContext('2d');

        v.addEventListener('play', function () { var i = window.setInterval(function () { ctx.drawImage(v, 0, 0, 270, 135) }, 20); }, false);
        v.addEventListener('pause', function () { window.clearInterval(i); }, false);
        v.addEventListener('ended', function () { clearInterval(i); }, false);
    </script>

</body>

</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。