运用HTML将视频镶嵌到CSS子控件内

2023-10-13 308 HTML

首先我们去找到你要加的CSS子控件添加如下代码

<video src="视频链接" width="100%" controls="">error</video>

在HTML中，要使视频自动播放，可以使用autoplay属性。但是，需要注意的是，由于浏览器的默认行为和用户隐私的考虑，自动播放视频可能会被阻止，特别是在没有声音的情况下。尽管如此，你可以尝试以下代码：

<video src="视频链接" width="100%" autoplay controls="">
  error
</video>

这里添加了autoplay属性来指示视频应该在页面加载后自动开始播放。然而，请确保你有合适的用户交互逻辑或者检查浏览器是否支持自动播放功能，以避免用户体验问题和潜在的策略冲突。在实际应用中，最好尊重用户的偏好设置，并提供清晰的播放控制选项。

如果想隐藏视频的进度条、暂停播放信息等控件，你可以使用CSS样式来实现。下面是一个示例代码，展示了如何通过CSS隐藏这些元素：

<style>
  .custom-video {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
  }

  .custom-video::-webkit-media-controls {
    display: none !important;
  }

  .custom-video::-webkit-media-controls-enclosure {
    display: none !important;
  }

  .custom-video::-webkit-media-controls-panel {
    display: none !important;
  }
</style>

将html代码增加css元素

<video class="custom-video" src="视频链接" autoplay controls="">
  error
</video>

在这个示例中，我们定义了一个CSS类.custom-video，并使用了一些特定于Webkit浏览器的伪类选择器来隐藏进度条、暂停播放信息等控件。请注意，这种方法可能不适用于所有浏览器，特别是非Webkit内核的浏览器（如Firefox或Edge）。
如果你需要跨浏览器兼容性，你可能需要使用JavaScript来动态控制视频控件的显示与隐藏，或者使用第三方库来实现更复杂的自定义视频播放器。

个别浏览器可能遇见无法自动播放这时候我们用js来运行试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动播放视频</title>
</head>
<body>
    <video id="myVideo" width="640" height="360" autoplay muted>
        <source src="your-video-file.mp4" type="video/mp4">
        你的浏览器不支持HTML5视频。
    </video>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var video = document.getElementById("myVideo");
            video.play();
        });
    </script>
</body>
</html>

解释：
autoplay属性：在 < video >标签中，添加autoplay属性使视频在加载时自动播放。
muted属性：为了确保视频在所有浏览器中都能自动播放，通常需要将视频静音，因为很多浏览器限制未经用户交互的自动播放。
play()方法：在JavaScript中，通过video.play()方法确保视频自动播放。
将以上代码保存为HTML文件并在浏览器中打开即可看到视频自动播放的效果。请确保用实际的视频文件替换your-video-file.mp4。

如果想让它循环播放修改成以下js代码

 <script>
        document.addEventListener("DOMContentLoaded", function() {
            var video = document.getElementById("myVideo");

            // 当视频结束时触发
            video.addEventListener("ended", function() {
                // 重置视频的当前时间到起始位置
                this.currentTime = 0;
                // 开始播放视频
                this.play();
            });

            // 开始播放视频
            video.play();
        });
    </script>

正文完

CSS html 前端

评论区