video audio 自动播放问题

<video  
    src="//www.runoob.com/try/demo_source/mov_bbb.mp4" 
    autoplay
    controls 
    muted 
    playsinline
/>
<button id="button"></button>

//浏览器环境：（静音自动播放）
//video：
//*audio标签不需要设置playsinline 因为他是音频*
//1. 设置autoplay 无效 是因为禁用了非静音下自动播放 请设置muted
//2. 在 1. 基础上设置muted 无效 是因为 ios 默认是全屏播放 请设置playsinline为true


//如果需要非禁用播放 建议首先获取user gesture token之后播放 例如点击 触摸等事件之后

simple example：

    var playPromise = video.play();
      if (playPromise !== undefined) {
        playPromise.then(_ => {
          // Automatic playback started!
          // Show playing UI.
          // We can now safely pause video...
          //video.pause();
        })
        .catch(error => {
          // Auto-play was prevented
          // Show paused UI.
        });
      }
  
//if you use `video.play()` to be able to play a video later? 
//you can use `video.load()` and here's how:

//Example: Fetch & Play

  button.addEventListener('click', onButtonClick);
  
  function onButtonClick() {
    // This will allow us to play video later...
    video.load();
    fetchVideoAndPlay();
  }

  function fetchVideoAndPlay() {
    fetch('https://example.com/file.mp4')
    .then(response => response.blob())
    .then(blob => {
      video.srcObject = blob;
      return video.play();
    })
    .then(_ => {
      // Video playback started ;)
    })
    .catch(e => {
      // Video playback failed ;(
    })
  }


//Warning

//Don't make your `onButtonClick` function asynchronous with the `async` keyword.
//You'll lose the "user gesture token" required to allow your video to play later.