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="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&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('<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="&MM_ComponentVersion=1&skinName=public/swf/Clear_Skin_3&streamName=public/video/test&autoPlay=false&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>');
}else{
document.write('<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>');
}
</script>이 코드를 작성하기 전에 jquery 파일을 소개하는 것을 잊지 마세요
이 시점에서 모든 브라우저와 호환되는 HTML 비디오 코드를 작성할 수 있습니다.
HTML에 비디오를 삽입하고 모든 브라우저와 호환되는 것에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
