HTML视频点击自动最大化播放技术学习

发表于 | 更新于 | 评论数： | 阅读次数：

最近遇到一个小需求，就是在网页前端实现点击视频播放的同时，实现视频最大化，简单学习一下。

技术原理

网页前端实现点击视频播放的同时，实现视频最大化的技术原理如下：

  • 捕捉点击视频播放的事件，在该事件中执行视频最大化方法

技术实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>视频技术测试</title>
    <style>
        html, body {
            width:  100%;
            height: 100%;
            margin: 0;
            padding:0;
        }

        #max{
            margin: 5% auto;
            width: 600px;
        }
    </style>
</head>

<body>
    <div id="max">
        <video id="media" controls width="600">
            <source src="./media/cc0-videos/flower.webm" type="video/webm" />
          
            <source src="./media/cc0-videos/flower.mp4" type="video/mp4" />
          
            Download the
            <a href="./media/cc0-videos/flower.webm">WEBM</a>
            or
            <a href="./media/cc0-videos/flower.mp4">MP4</a>
            video.
          </video>
    </div>
</body>

<script>
    const video = document.querySelector("#media");

    video.addEventListener("play", (event) => {
        video.requestFullscreen();
    });
    
</script>

</html>

参考链接

  1. 深入理解HTML5视频标签：掌握全方位的播放控制和交互技巧,by 未闻花名_review.