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>

현재 비디오 요소는 세 가지 비디오 형식을 지원합니다.
형식 IE Firefox Opera Chrome Safari
Ogg 아니요 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은 이를 지원하지 않으며 해당 사용자는 여전히 중국에서 매우 큰 그룹입니다. 이를 지원하는 다른 솔루션을 생각해야 합니다.

코드는 다음과 같습니다.

<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 버전을 확인할 필요는 없습니다). 이유는 당분간 < for all IE ;object> 태그를 사용하고, 버전에 따라 다른 태그를 로드하는 것입니다. 코드는 다음과 같습니다.
코드는 다음과 같습니다.

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

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

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

HTML에 비디오를 삽입하고 모든 브라우저와 호환되는 것에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!