H5에서 비디오 태그의 브라우저 호환성을 향상시키는 방법을 가르쳐주세요.

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

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

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

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

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

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

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

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

2단계: 해당 HTML5 동영상 코드 작성

HTML5의 동영상은 실제로 일부 동영상 관련 정보가 포함된 간단한 태그입니다. 아래에서는 특정 코드를 직접 제공하고 간략하게 설명하겠습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<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>

동영상 태그 표현 다음은 동영상의 너비와 높이 속성 은 각각 이 동영상 콘텐츠의 너비와 높이(단위 픽셀)를 나타냅니다. 비디오 태그에는 에서 참조하는 비디오와 비디오의 형식 및 유형을 나타내는 데 사용되는 소스 태그가 포함될 수 있습니다. 하위 호환성을 보장하기 위해 비디오 태그에 프롬프트도 추가했습니다. 비디오 태그를 지원하는 브라우저에서는 이 문장이 표시되지 않습니다. 여기에는 비디오 다운로드 주소도 추가됩니다. 브라우저가 이를 지원하지 않는 경우 사용자는 다운로드하여 시청할 수 있습니다. 특히 주의해야 할 점은 호스트가 이러한 동영상 요청을 올바르게 처리할 수 있어야 한다는 것입니다. 호스트가 이러한 비디오를 요청할 때 Content-Type 헤더에 올바른 MIME 유형을 전송하는지 확인하세요. 확실하지 않은 경우 호스팅 서비스 제공업체에 문의하거나 직접 추가할 수 있습니다. 호스트가 .htaccess를 지원하는 경우 .htaccess 파일에 다음 문을 추가할 수 있습니다.

코드는 다음과 같습니다.

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

대략적인 내용이며 비교적 간단합니다. 비디오의 특정 사용법에 대해서는

검색 할 수 있으며 이 기사의 확장 읽기 링크도 볼 수 있습니다. 여기서는 반복하지 않겠습니다.

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

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

XML/HTML Code复制内容到剪贴板
<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>

는 원래의 일반 플래시 도입 방법에 따라 비디오 태그에 직접 작성할 수 있습니다. 이러한 방식으로 우리는 비디오 기능의 크로스 브라우저 호환 사용을 달성했습니다

【관련 추천】

1. html/css 무료 동영상 튜토리얼

HTML5 동영상 표시 표준에 대한 자세한 설명

3. 39000f942b2545a5315c57fa3276f220 태그의 매개변수와 속성을 간략하게 설명하세요

H5의 video 태그에 MP4 동영상이 포함된 이유를 분석하세요. 웹페이지를 재생할 수 없습니다

5. HTML5 오디오 및 비디오 사용 방법을 가르쳐주세요

위 내용은 H5에서 비디오 태그의 브라우저 호환성을 향상시키는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!