笔记大全

html5 视频播放解决方案

更新时间：2023-09-09

引入HTML5 Video标签和视频源

在HTML5中，我们可以使用<video>标签来实现视频的播放。在视频标签中，可以添加多个source元素来支持不同格式的视频，例如：

    <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>

在上面的代码中，我们指定了三种不同格式的视频，如果浏览器支持，将会自动选择最佳的格式来播放。如果浏览器不支持视频标签，还可以在最后添加一段文本，作为替代方案。

视频控制器与播放暂停

在视频标签中添加controls属性，可以生成一个默认的控制器。可以通过JavaScript来控制视频的播放、暂停等行为，例如：

    <video id="myVideo" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <button onclick="playPause()">播放/暂停</button>

    <script>
        var video = document.getElementById("myVideo");

        function playPause() {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
    </script>

在上面的代码中，我们先在控制栏下方添加了一个按钮，然后通过JavaScript获取视频元素，并监听按钮点击事件。当按钮被点击时，根据视频的状态来决定是播放还是暂停。

自定义视频控制器

我们也可以自定义视频控制器，这需要我们手动添加一些HTML元素和JavaScript代码。例如：

    <video id="myVideo">
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <div id="myControls">
        <button id="playBtn">播放</button>
        <button id="pauseBtn">暂停</button>
        <input type="range" id="volumeRange" min="0" max="1" step="0.1" value="1">
    </div>

    <script>
        var video = document.getElementById("myVideo");
        var playBtn = document.getElementById("playBtn");
        var pauseBtn = document.getElementById("pauseBtn");
        var volumeRange = document.getElementById("volumeRange");

        playBtn.addEventListener("click", function() {
            video.play();
        });

        pauseBtn.addEventListener("click", function() {
            video.pause();
        });

        volumeRange.addEventListener("input", function() {
            video.volume = volumeRange.value;
        });
    </script>

在上面的代码中，我们先自定义了一个控制栏，包含了播放、暂停和音量的调节。然后在JavaScript中获取对应的HTML元素，并在点击、滑动等事件时触发相应的操作。这样可以让我们自由地定制视频控制器，实现更加个性化的功能。

全屏模式

在一些需要展示较大尺寸视频的场景下，可以添加全屏模式的功能。在HTML5中，可以通过Fullscreen API来实现。例如：

    <video id="myVideo" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.webm" type="video/webm">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <button onclick="toggleFullScreen()">全屏模式</button>

    <script>
        var video = document.getElementById("myVideo");

        function toggleFullScreen() {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) { /* Firefox */
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) { /* IE/Edge */
                video.msRequestFullscreen();
            }
        }
    </script>

在上面的代码中，我们添加了一个按钮，并在按钮点击事件中调用toggleFullScreen函数。函数中通过Fullscreen API来实现全屏模式，并针对不同的浏览器做了兼容处理。

c语言编程笔录