H5에서 비디오 및 오디오 태그와 진행률 표시줄을 사용하는 방법

이번에는 H5에서 video 및 오디오 태그와 진행 표시줄을 사용하는 방법을 보여 드리겠습니다. H5에서 비디오 및 오디오 태그와 진행 표시줄을 사용할 때 주의 사항은 무엇입니까? 일어나서 살펴보세요.

최근 프로젝트에서 Html5의 비디오 및 오디오 태그를 사용하여 온라인으로 비디오 및 오디오 파일을 재생했는데 페이지에서 재생한 후 진행률 표시줄이 유효하지 않은 문제가 발생했습니다.

w3c를 확인한 후 발견했습니다. HTML 코드는 다르지 않았습니다. 정적 HTML을 사용하고 비디오 태그를 사용하여 로컬 파일 진행률 표시줄을 재생하면 작동할까요?

해본 결과 정말 작동한다는 것을 알았습니다. 그런 다음 F12를 사용하여 프로젝트에서 로컬 비디오 재생과 네트워크 응답 재생의 차이점을 확인했는데, 응답 헤더에 이러한 내용을 추가했습니다. 백그라운드 코드를 하나씩 추가하여 마침내 성공했습니다!

response.setHeader("Cache-Control","max-age=31536000, must-revalidate");  
response.setHeader("Content-Length", file.length() + "");  
if (fileName.contains(".mp4")) {  
   response.setContentType("video/mpeg4");  
}  
if (fileName.contains(".mp3")) {  
   response.setContentType("audio/mpeg");  
   response.setHeader("Accept-Ranges:", "bytes");  
}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5를 사용하여 카메라를 호출하는 방법

H5에서 postMessage를 사용하여 두 웹 페이지 간에 데이터를 전송하는 방법

match() 및 search() 함수 정규 표현식 과 match() 및 search() 함수의 구체적인 차이점은 무엇인가요?

위 내용은 H5에서 비디오 및 오디오 태그와 진행률 표시줄을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!