비디오 플레이어 자동 재생 문제, 비디오 비디오 스크린샷

최근에 자동 재생이 필요한 9제곱 그리드 동영상 재생 기능을 작성했는데 문제점을 발견했습니다. 일부 브라우저에서는 오디오가 포함된 동영상의 자동 재생을 금지하고 있습니다. 일부 브라우저에서는 자동 재생이 가능하더라도 이후에는 동영상이 자동으로 재생되지 않습니다. 페이지가 새로고침되었습니다. .

나중에 정보를 찾아보니 오디오가 포함된 영상 재생은 금지되어 있으니 그냥 영상을 음소거 하시면 됩니다.

동영상에는 무음 재생 여부를 나타내는 muted 속성이 있습니다 . muted=muted 로 설정하면 자동으로 재생됩니다. 어떤 브라우저나 새로고침을 하든 자동으로 재생됩니다.

또 다른 방법은 js를 사용하여 play() 메서드를 모니터링하고 실행하는 것입니다.

소리를 재생하고 싶다면 먼저 음소거한 후 볼륨을 500으로 설정하면 됩니다.

<video
      width="100%"
      height="100%"
      :src="video.videoUrl"
      :poster="video.liveVideoThumbnail"
      autoplay
      muted
      >

첨부된 렌더링

여기에도 스타일 레이아웃 문제가 있습니다. 비디오 태그에는 너비와 높이를 설정할 수 있습니다. 일반적으로 비디오는 컨테이너에 싸여 있습니다. 비디오의 너비와 높이를 100%로 설정하면 비디오가 자동으로 전체 내용을 표시합니다. 16:9 비율의 비디오 콘텐츠.

비디오에는 object-fit:contain 속성도 있습니다. 기본값은 contain이며 이는 비디오가 컨테이너에서 적응형임을 의미합니다. object-fit:cover를 설정할 수도 있습니다. 완전히 덮기를 원한다면 object입니다. -맞춤:채우기.

비디오의 너비를 설정한 다음 비디오 높이를 적응형으로 만들 수 있습니다.

영상 스크린샷 기능

const myVideo=document.getElementById("video1");
  const canvas = document.getElementById('canvas')
  // can.width = myVideo.offsetWidth
  canvas.width = Math.ceil(myVideo.offsetHeight /9) * 16   // 获取视频画面的真实宽度
  canvas.height = myVideo.offsetHeight
  
  canvas.getContext('2d').drawImage(myVideo, 0, 0, can.width, can.height)
  let img = canvas.toDataURL('image/png', 1.0)
  document.getElementById("img").src = img

비디오 플레이어 자동 재생 문제, 비디오 비디오 스크린샷

추천