이 글은 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>
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>
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="&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>
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
주요 브라우저와 호환되는 플레이어의 HTML5 구현
H5 새 속성 오디오 오디오 및 비디오 제어 분석 정보
WeChat 및 앱에서 HTML5 페이지 오디오 및 비디오를 구현하는 방법 자동으로 다음 재생
위 내용은 비디오를 HTML에 삽입하고 브라우저와 호환 가능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!