Canvas 插入视频

最新推荐文章于 2025-05-07 11:33:15 发布

原创

最新推荐文章于 2025-05-07 11:33:15 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在HTML5 Canvas中动态插入视频元素，并实现视频的播放控制，结合Canvas的绘图能力，创建出独特的视频展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
    <meta charset="utf-8">
    <style>
        #video {
            position: absolute;
            top:30px;
            left: 100px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <video loop controls autoplay id="video" >
          <source src="sadd.mp4" type="video/mp4"></source>
    </video>
    <script>
        // 自执行匿名函数：
        // 常见格式：(function() { /* code */ })();
        // 解释：包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。
        // 作用：可以用它创