HTML5 VideoAPI，打造自己的Web视频播放器

作者：System 时间：2024年08月14日分类：所有,html5 字数：1797




<!DOCTYPE html>
<html>
<head>
    <title>自定义Web视频播放器</title>
    <style>
        #videoPlayer {
            width: 640px;
            height: 360px;
            margin: auto;
            display: block;
        }
        .controls {
            text-align: center;
        }
        .controls button {
            margin: 5px;
            padding: 5px 10px;
            background: #000;
            color: #fff;
            border: none;
            outline: none;
            cursor: pointer;
        }
        .controls button:hover {
            background: #fff;
            color: #000;
        }
    </style>
</head>
<body>
    <video id="videoPlayer" controls>
        <source src="movie.mp4" type="video/mp4">
        对不起，您的浏览器不支持视频标签。
    </video>
    <div class="controls">
        <button onclick="playPause()">播放/暂停</button>
        <button onclick="makeBig()">变大</button>
        <button onclick="makeSmall()">变小</button>
        <button onclick="makeNormal()">正常大小</button>
        <script>
            var myVideo = document.getElementById("videoPlayer");
 
            function playPause() {
                if (myVideo.paused)
                    myVideo.play();
                else
                    myVideo.pause();
            }
 
            function makeBig() {
                myVideo.width = 1280;
                myVideo.height = 720;
            }
 
            function makeSmall() {
                myVideo.width = 320;
                myVideo.height = 180;
            }
 
            function makeNormal() {
                myVideo.width = 640;
                myVideo.height = 360;
            }
        </script>
    </div>
</body>
</html>

这段代码提供了一个简单的Web视频播放器，包括播放、暂停、调整视频大小等基本功能。使用HTML5的<video>元素和JavaScript，可以方便地为视频内容添加交互性。

HTML5 VideoAPI，打造自己的Web视频播放器

评论已关闭

推荐阅读