话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>video播放问题</title>
    <style>
    #demo{
        height: 500px;
        width: 1400px;
    }
    .demo1{
        width: 700px;
        height: 500px;
        float: left;
    }
    .demo1 video{
        height: 400px;
        width: 400px;
    }
    .demo2{
        width: 700px;
        height: 500px;
        float: left;
    }
    .demo2 video{
        height: 400px;
        width: 400px;
    }
    </style>
    <script>
    function play_v1(v){
        v.play()
    }
    function stop_v1(v){
        v.pause();
    }
    </script>
</head>
<body>
    <div>
        <div id="v1_box" class="demo1">
            <p>1:静音、自动播放</p>
            <video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)"  muted src="http://yh2019.oss-cn-beijing.aliyuncs.com/35cc8560068b47d78ee18a118e2982ee/video/e2474c04cbff49089132a92579fb5ac7.mp4"></video>
        </div>
        <div id="v2_box" class="demo2">
            <p>2:有声音、自动播放(至少需要点击一下文档,产生交互)</p>
            <video onmouseover="play_v1(this)" onmouseleave="stop_v1(this)"  src="http://yh2019.oss-cn-beijing.aliyuncs.com/35cc8560068b47d78ee18a118e2982ee/video/e2474c04cbff49089132a92579fb5ac7.mp4"></video>
        </div>
    </div>
</body>
</html>

video 实现静音自动播放

<video id="demo" controls="controls" autoplay="autoplay" muted>
<source src="./conference_2.mp4" type="video/mp4">
</video>

亲测试有效


作者:,如若转载,请注明出处:《video实现有声音自动播放视频的实现方法》