WEB API

石怜安大约 3 分钟

视频API-自动播放

演示

<div class="container">
  <video class="video" src="https://media.w3.org/2010/05/sintel/trailer.mp4" autoplay></video>
  <div class="modal">
    <button class="btn">开始播放</button>
  </div>
</div>

const video = document.querySelector('.video')
const modal = document.querySelector('.modal')
const btn = document.querySelector('.btn')

async function play() {
  video.muted = true; // 静音
  await video.play() // 静音能直接播放(自动播放条件之一)
  const ctx = new AudioContext()
  const canAudioPlay = ctx.state === 'running' // 判断是否有声音，去触发用户手动操作
  await ctx.close()
  if(canAudioPlay) {
    video.muted = false
    modal.style.display = 'none'
    btn.removeEventListener('click', play)
  } else {
    modal.style.display = 'flex'
    btn.addEventListener('click', play)
  }
}
play()

* {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  display: flex;
  position: relative;
}
video {
  height: calc(100% - 40px);
}
.modal {
  position: absolute;
  z-index: 2222;
  opacity: 0.8;
  width: 100%;
  height: 100%;
}
.modal button {
  width: 100px;
  height: 50px;
  margin: auto;
}

文件API-浏览器操作文件

剪切板API

navigator.clipboard.readText: 用于读取剪切板
navigator.clipboard.writeText: 用于写入剪切板
window监听 paste事件，FileReader文件流形式处理图片

案例如下：点击按钮切换复制内容测试，测试图片则需要复制图片再回来粘贴