HTML에 비디오를 삽입하고 모든 브라우저와 호환되는 방법

이 글은 주로 HTML에 동영상을 삽입하는 방법을 소개하며 모든 브라우저와 호환됩니다. 이제 이를 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다. HTML. 하나는 고대 객체 태그이고 다른 하나는 HTML5의 비디오 태그입니다. 전자는 상대적으로 호환성이 좋지만 후자의 호환성은 골치 아픈 문제입니다

HTML에 비디오를 삽입하는 데 가장 일반적으로 사용되는 두 가지 방법이 있습니다. 고대의 태그 중 하나는 HTML5의 태그입니다.

전자는 호환성은 있지만 사용하기가 별로 편리하지 않습니다. 후자는 사용하기에는 매우 편리하지만 호환성이 골치아프네요.

후자의 호환성 문제가 많지만, 사용하기 매우 편리하고 향후 웹디자인의 발전 추세에 부합하기 때문에 영상 삽입 시 후자를 주요 방식으로 사용하고 있으며, 호환성 문제로 인해, 전자는 보충제로 사용됩니다.
예제는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

<video width="602px" height="345px" controls="controls"> 
<source src="public/video/test.mp4" type="video/mp4"></source> 
<source src="public/video/test.ogg" type="video/ogg"></source> 
your browser does not support the video tag 
</video>

현재 비디오 요소는 세 가지 비디오 형식을 지원합니다.

Format IE Firefox Opera Chrome Safari

Ogg No 3.5+ 10.5+ 5.0+ 아니요
MPEG 4 9.0+ 아니요 아니요 5.0+ 3.0+
WebM 아니요 4.0+ 10.6+ 6.0+ 아니요

Ogg = Theora 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 Ogg 파일

MPEG4 = H.264 비디오 인코딩 포함 및 AAC 오디오 인코딩 MPEG 4 파일

WebM = VP8 비디오 인코딩 및 Vorbis 오디오 인코딩이 포함된 WebM 파일

참고: 형식은 H.264 비디오 및 AAC 오디오여야 하는 MPEG 4와 같이 위의 세 가지 세부 요구 사항을 충족해야 합니다. .

이 경우 비디오 형식이 맞다면 대부분의 브라우저의 호환성 결과에 상당히 만족하지만 IE678은 이를 지원하지 않으며 중국에서는 여전히 사용자가 매우 많기 때문에 뭔가를 생각해야 합니다. else. 솔루션이 이를 지원합니다.

코드 복사 코드는 다음과 같습니다.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1"> 
<param name="movie" value="FLVPlayer_Progressive.swf" /> 
<param name="quality" value="high" /> 
<param name="wmode" value="opaque" /> 
<param name="scale" value="noscale" /> 
<param name="salign" value="lt" /> 
<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" /> 
<param name="swfversion" value="8,0,0,0" /> 
<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 --> 
<param name="expressinstall" value="expressInstall.swf" /> 
</object>

여기에는 flv 형식의 비디오 외에도 여러 swf 또는 js 파일이 있습니다. , 모두 DW 소프트웨어를 사용하여 생성되었습니다. 태그를 연구하고 싶지 않다면 DW 소프트웨어로 이동하여 이 두 코드 조각을 교묘하게 융합할 수 있습니다. 모든 주류 브라우저와 호환되는 최고의 코드입니다.

그래서 다음을 수행할 수 있습니다.

jquery를 사용하여 브라우저가 IE인지 확인합니다. (특정 IE 버전을 확인할 필요는 없습니다. 더 높은 버전의 IE는 서버 문제로 인해 통과하지 못할 수 있기 때문입니다. 당분간 모든 IE는 태그) 버전에 따라 다른 태그를 로드합니다. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

<script> 
if($.browser.msie){ 
document.write(&#39;<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="624" height="351" style="margin-top: -10px;margin-left: -8px;" id="FLVPlayer1">&#39;+ 
&#39;<param name="movie" value="FLVPlayer_Progressive.swf" />&#39;+ 
&#39;<param name="quality" value="high" />&#39;+ 
&#39;<param name="wmode" value="opaque" />&#39;+ 
&#39;<param name="scale" value="noscale" />&#39;+ 
&#39;<param name="salign" value="lt" />&#39;+ 
&#39;<param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=public/swf/Clear_Skin_3&amp;streamName=public/video/test&amp;autoPlay=false&amp;autoRewind=false" />&#39;+ 
&#39;<param name="swfversion" value="8,0,0,0" />&#39;+ 
&#39;<!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示，请将其删除。 -->&#39;+ 
&#39;<param name="expressinstall" value="expressInstall.swf" />&#39;+ 
&#39;</object>&#39;); 
}else{ 
document.write(&#39;<video width="602px" height="345px" controls="controls">&#39;+ 
&#39;<source src="public/video/test.mp4" type="video/mp4"></source>&#39;+ 
&#39;<source src="public/video/test.ogg" type="video/ogg"></source>&#39;+ 
&#39;your browser does not support the video tag&#39;+ 
&#39;</video>&#39;); 
} 
</script>

Don' 이 코드를 작성하기 전에 jquery 파일을 소개하는 것을 잊지 마세요

이 시점에서 모든 브라우저와 호환되는 파일을 작성할 수 있습니다. 브라우저의 HTML 비디오 코드는 사라졌습니다.

위 내용은 HTML에 비디오를 삽입하고 모든 브라우저와 호환되는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!