解决viedo标签无法自动播放的问题

解决viedo标签无法自动播放的问题

• 问题描述：

  • 使用了<viedo>标签，也加上了autoplay属性，但是在打开页面的时候还是不能实现音频自动播放。
  • 还使用了<audio>标签加入autoplay属性，也不能实现。
  • 同时还尝试了<iframe >标签，加上了allow=autoplay，同样也不能实现。

• 解决办法：

  • 1.了解了标签的属性设置：autoplay:自动播放，floop:循环播放，controls：浏览器为音频提供播放控件，muted:音频是否为静音，设置该属性怎值为true，表示静音播放，false表示取消静音。
  • 2.发现添加muted才能播放视频，但是muted属性是默认让视频静音播放的。
  • 3.通过js对muted值的设置。

• 实现一打开页面音频自动循环播放：

  • <video src="/viedo/遗失了你.mp3" id="myVideo" autoplay loop controls muted></video>
    

    在js中：获取元素；在页面加载完成后，对muted属性值进行判断，让其值为false

  • 	let video = document.getElementById("myVideo");
    

  • 	window.onload = function(){
    		// muted = true:静音
    		if(video.muted){
    			video.muted = false;
            }
        }