html5自动播放视频

最新推荐文章于 2025-05-27 11:58:44 发布

原创最新推荐文章于 2025-05-27 11:58:44 发布 · 1.2w 阅读

10 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

168 篇文章

订阅专栏

Web

163 篇文章

订阅专栏

博客介绍了HTML5可直接播放视频，使用特定标记即可。但自动播放属性“autoplay”无效，需设置静音属性“muted”才能实现自动播放，还调侃了未静音自动播放可能带来的尴尬场景。

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

html5可以直接播放视频。就用标记<video>即可，真好。

可是怎么自动播放视频？

不是有"autoplay"吗？但是，无效。任凭你设属性，或是video.play()都无济于事。非要你手动点击才能播放。

后来才知道，需要设置静音属性autoplay才起作用！真是太细心了！设想我们无意中打开一个爱情动作片，叫声很大，而且好死不死，是在一个重要的高级会议场合，怎么破？

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <style>
        html,body{
            margin: 0;
            width:100%;
            height: 100%;
        }
        #video1{
            width:350px;
            height:280px;
        }
        .hidden{
            display:none;
        }
    </style>
    <script type="text/javascript" src="/static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <div>
        <video id="video1" muted="muted" autoplay="autoplay" src="" controls="controls">
        </video>
    </div>
</body>
<script type="text/javascript">
    $(function(){
		var video = document.getElementById("video1");
        video.src = "http://192.168.0.98:20000/v1.mp4";
        video.play();
    });
</script>
</html>