집 >웹 프론트엔드 >HTML 튜토리얼 >비디오를 HTML에 삽입하고 브라우저와 호환 가능

비디오를 HTML에 삽입하고 브라우저와 호환 가능

不言원래의: 2018-06-12 10:07:141275검색

이 글은 CSS 사용자 정의 녹색 체크박스 버튼 스타일을 주로 소개합니다. 이제 도움이 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

HTML에 동영상을 삽입하는 방법에는 두 가지가 있습니다. 는 고대 객체 태그이고 다른 하나는 HTML5의 비디오 태그입니다. 전자는 상대적으로 호환성이 더 좋은 반면, 후자의 호환성은 골치 아픈 문제입니다. HTML에 비디오를 삽입하는 데 가장 일반적으로 사용되는 방법은 두 가지입니다. object> 태그 중 하나는 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 아니요 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 소프트웨어로 생성되었습니다. <객체><를 연구하고 싶지 않습니다. ;/object> 친구를 태그하고 DW 소프트웨어로 이동하여 생성하세요. 이 두 가지 코드를 영리하게 통합할 수 있다면 모든 주류 브라우저와 호환되는 최고의 코드를 얻을 수 있습니다. 그래서 다음을 수행할 수 있습니다.

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

<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="&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>'); 
}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 비디오 코드를 작성합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

비디오를 HTML에 삽입하고 브라우저와 호환 가능

관련 기사