HTML5의 비디오 태그 브라우저 호환성 향상 방안 공유

HTML5를 사용할 때 데스크톱과 모바일을 포함한 브라우저 호환성 문제를 고려해야 합니다. 특히 동영상의 경우 브라우저의 디코딩 지원이 다르기 때문에 HTML5 동영상 태그에 대한 브라우저 호환성 향상 솔루션을 공유해 보겠습니다.

과거에는 웹페이지의 동영상을 해결하는 가장 좋은 방법은 플래시였습니다. 현재까지도 Youku와 같은 동영상 웹사이트와 Xiami와 같은 온라인 음악 웹사이트는 여전히 플래시를 사용하고 있습니다. 하지만 HTML5의 발전으로 이러한 상황은 바뀔 것이다. 비디오에 관한 한 HTML5는 비디오를 추가하여 온라인으로 비디오를 재생하는 기능을 구현합니다.

HTML5 비디오를 사용하면 JavaScript를 사용하여 비디오 콘텐츠 등을 쉽게 제어할 수 있습니다. 이는 매우 강력하고 코드가 적어 로딩 속도가 빠릅니다. 또한 크로스 플랫폼, 특히 일부 태블릿, 휴대폰 등이 상대적으로 좋습니다. 예를 들어 애플 제품은 플래시를 지원하지 않고 HTML5의 동영상 기능만 지원한다.

하지만 HTML5의 호환성 문제로 인해 웹페이지에서 동영상을 재생할 수는 있지만 초기 브라우저를 사용하는 방문자는 이 동영상을 정상적으로 시청하지 못할 수도 있습니다. 또한 비디오 인코더의 역사적 기원으로 인해 다양한 브라우저가 다양한 비디오 형식을 지원합니다. 이러한 문제를 해결하고 웹 페이지에서 HTML5 비디오 기능을 사용하려면 다음 세 단계를 수행하면 됩니다.

1단계: 다중 형식의 비디오 파일을 미리 준비하세요

인코더의 저작권 문제로 인해 브라우저마다 비디오 형식의 호환성이 다릅니다. 현재 모든 브라우저와 호환되는 비디오 형식은 없으며 유일한 해결 방법은 비디오를 여러 형식으로 변환하는 것입니다.

먼저 Apple 기기에서 사용할 수 있는 mp4 형식의 동영상을 준비하고, 두 번째로 Firefox에서 사용할 수 있는 ogv 형식의 동영상을 준비하고, 마지막으로 Google에서 사용할 수 있는 webm 형식의 동영상을 준비합니다. 크롬 등.. Webm은 Google에서 제안한 무료 오픈 소스이며 모든 브라우저와 호환되는 비디오 형식이 될 가능성이 높습니다.

다중 형식의 브라우저를 준비할 때 가장 어려운 점은 형식을 변환하는 것입니다. 국내 비디오 변환 도구는 기능이 상대적으로 적고 변환 형식이 위의 마지막 두 가지만큼 좋지 않을 수 있으며 품질이 다양하고 사용 전에 등록이 필요한 경우가 많습니다. 무료 온라인 비디오 변환 도구인 Online Converter라는 외국 도구를 추천합니다. 소프트웨어를 설치할 필요도 없습니다. 해당 대상 형식을 선택한 다음 비디오를 업로드하고 매개변수를 구성하면 변환할 수 있습니다. 적절한 도구가 없다면 시도해 볼 수 있습니다.

2단계: 해당 HTML5 비디오 코드 작성

HTML5의 비디오는 실제로 일부 비디오 관련 정보가 포함된 간단한 태그입니다. 아래에 구체적인 코드를 직접 드리고 간단하게 설명드리겠습니다.

<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
    <source src=”my_video.webm” type=”video/webm” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”video.webm”>下载视频</a>.   
</video>

video 태그는 동영상임을 나타내고, width 속성과 height 속성은 각각 동영상 콘텐츠의 너비와 높이(단위 픽셀)를 나타냅니다. 비디오 태그에는 참조된 비디오와 비디오의 형식 및 유형을 나타내는 데 사용되는 소스 태그가 포함될 수 있습니다. 하위 호환성을 보장하기 위해 비디오 태그에 프롬프트도 추가했습니다. 비디오 태그를 지원하는 브라우저에서는 이 문장이 표시되지 않습니다. 여기에는 비디오 다운로드 주소도 추가됩니다. 브라우저가 이를 지원하지 않는 경우 사용자는 다운로드하여 시청할 수 있습니다.

특히 주의해야 할 점은 호스트가 이러한 비디오 요청을 올바르게 처리할 수 있어야 한다는 것입니다. 호스트가 이러한 비디오에 대해 요청할 때 Content-Type 헤더에 올바른 MIME 유형을 전송하는지 확인하세요. 확실하지 않은 경우 호스팅 서비스 제공업체에 문의하거나 직접 추가할 수 있습니다. 호스트가 .htaccess를 지원하는 경우 .htaccess 파일에 다음 명령문을 추가할 수 있습니다:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

그게 다입니다. 비디오 사용 방법에 대해 비교적 간단하고 더 구체적입니다. 검색할 수 있으며 확장 읽기도 볼 수 있습니다. 이 기사의 링크는 여기입니다. 자세한 내용은 없습니다.

3단계: 이전 브라우저에 대한 호환성 만들기

앞서 언급했듯이 브라우저가 비디오를 지원하지 않으면 비디오의 프롬프트 내용이 표시됩니다. 따라서 오래된 브라우저의 경우 이 프롬프트 콘텐츠를 기존 플래시로 대체할 수 있습니다. 이런 방식으로 브라우저가 비디오 태그와 호환되지 않는 경우 비디오의 플래시 버전이 표시됩니다. 예:

<video width=”800” height=”374”>  
    <source src=”my_video.mp4” type=”video/mp4” />  
    <source src=”my_video.ogv” type=”video/ogg” />  
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  
    <param name="movie" value="fallback.swf" />  
    <param name="flashvars" value="autostart=true&amp;file=video.flv" />  
</object>  
</video>

원래의 일반 플래시 도입 방법에 따라 동영상 태그에 직접 적어주시면 됩니다. 이로써 비디오 기능의 크로스 브라우저 호환 사용이 가능해졌습니다

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 웹사이트!

관련 권장 사항:

H5 새 속성 오디오 및 비디오의 제어 분석 정보

HTML5 동영상 플레이어의 전체화면(fullScreen)을 구현하는 방법

HTML5 비디오 태그 재생 제어

위 내용은 HTML5의 비디오 태그 브라우저 호환성 향상 방안 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!