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

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

Jan 28, 2023 am 09:36 AM
html5 video

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 중첩 테이블

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 정렬 목록

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML 온클릭 버튼

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자

See all articles