> 웹 프론트엔드 > 프런트엔드 Q&A > html5의 비디오 태그가 재생되지 않으면 어떻게 해야 합니까?

html5의 비디오 태그가 재생되지 않으면 어떻게 해야 합니까?

藏色散人
풀어 주다: 2023-01-28 09:36:32
원래의
3768명이 탐색했습니다.

HTML5의 비디오 태그가 재생되지 않는 문제에 대한 해결 방법: 1. 비디오 스크린샷을 사용하여 재생 버튼을 만들고 비디오의 원래 위치를 차지합니다. 2. 점유 버튼의 클릭 이벤트를 모니터링하고 "비디오"를 사용합니다. .play()"; 3. 자리 표시자 이미지를 숨기고 로드하기만 하면 됩니다.

html5의 비디오 태그가 재생되지 않으면 어떻게 해야 합니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, DELL G3 컴퓨터

html5의 비디오 태그가 재생되지 않으면 어떻게 해야 합니까?

IOS-HTML5-비디오 태그를 재생할 수 없습니다.

h5 비디오 태그를 UIwebview에서 재생할 수 없습니다. Safari는 할 수 있습니다.

일부 휴대폰은 할 수 있지만 일부 휴대폰은 할 수 없습니다

video.js와 일치합니다. 하지 마십시오. 더 이상 싫어요 호환성 패키지를 소개해보세요. 더 나은 경험을 원하신다면 https://videojs.com/

를 이용하시는 것을 추천드립니다. 원리를 직접 경험해보고 싶다면 마지막에 데모 코드를 복사하시면 됩니다.

전통적인 방법은 HTML 태그로 동영상을 작성하는 것입니다. 태그를 클릭하여 재생할 수 있습니다.

<video src="xxx.mp4" controls poster="url?vframe/jpg/offset/5" preload="load"></video>
// ?vframe/jpg/offset/5  这个是七牛接口,取截图用的,5就是第5秒截图
로그인 후 복사

그러나 이렇게 작성된 것은 IOS 10.3.2/3 11.x.x에서 작동하지 않습니다. 및 기타 테스트 기계이지만 개인 휴대폰에서 사용할 수 있으며 일부 휴대폰에서는 사용할 수 있습니다. 일부 휴대폰에서는 작동하지 않습니다.

수정 후:

1단계: 비디오 스크린샷을 사용하여 비디오의 원래 위치를 차지할 재생 버튼을 만듭니다.

2단계: 자리 표시자 버튼의 클릭 이벤트를 모니터링하고 video.play()를 사용합니다. 동영상 요청이 있어 로딩 중입니다

3단계: 동영상 로딩에 대한 약속이 있고 자리 표시자 이미지를 숨기고 로딩하면 됩니다

팁:

    다른 휴대폰 / 시스템에는 다양한 요청 범위가 있으며 일반적으로 3~5,206개의 요청으로 나뉩니다.
  • console.time("loading milliseconds"); 로딩 시간을 볼 수 있는데, 이는 Charles가 캡처한 것과 기본적으로 동일합니다.
  • 휴대폰/시스템에 따라 성능도 다를 수 있습니다. 일부는 클릭하자마자 반환되며, 일부는 반환되기 전에 비디오가 완전히 로드될 때까지 기다려야 합니다.
  • 동영상의 속성. DOM은 현재 로드된 양과 총 금액을 1로 나눈 비율이며, 특정 속성을 볼 수 있습니다.> https://developer.mozilla.org/zh-CN/docs/Web/HTML/ 요소/영상
  • 온라인 주소 : http://m.soyoung ...

위 내용은 html5의 비디오 태그가 재생되지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿