移动端触摸按钮视频开始播放

Question

有一个需求是长按按钮视频开始自动播放，刚开始发现一直会报play() failed because the user didn't interact with the document first，找到问题说是chrome为了避免标签产生随机噪音,给video加个muted静音就可以了，但是不想静音有什么解决方法

相关代码

// <video id="video1" width="320" height="240" controls muted>

    <source src="1.mp4" type="video/mp4">
</video>
<button class="button1">特效1</button>

<script>
window.onload = function () {
    var myVid=document.getElementById("video1");
    var box = document.querySelector('.button1');
    box.addEventListener('touchstart',function (e) {
        // console.log('start');
        myVid.play();
        myVid.muted = false
    });
    box.addEventListener('touchmove',function (e) {
        console.log('move');
        console.log(e);
    });
    box.addEventListener('touchend',function (e) {
        console.log('end');
        console.log(e);
        myVid.pause();
    });
}
</script>

Answer 1

有没有大神来指点下