<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="player" width="445" height="211" title="동영상">
<param name="url" value="http://www.shinhaninvest.com/event/evt_scatch_plus/scatchplus.wmv" />
<param name="src" value="http://www.shinhaninvest.com/event/evt_scatch_plus/scatchplus.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="0" />
<!--[if !IE]>-->
<object type="video/x-ms-wmv" data="http://www.shinhaninvest.com/event/evt_scatch_plus/scatchplus.wmv" width="445" height="211"title="동영상">
<param name="src" value="http://www.shinhaninvest.com/event/evt_scatch_plus/scatchplus.wmv" />
<param name="autostart" value="0" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object> .
웹표준이라는 것은 쉽게 풀이 한다면 브라우저의종류(익스,크롬,파폭,사파리,오페라 등)나 브라우져 버젼이
맞지 않더라도 웹페이지를 사용할수
있게끔 하는 것을 말합니다.또는 개발자사이에서 이런것은 이런식으로 마크업해서
복잡한 코딩에서도 서로 알아볼수 있게끔 하자 정도의 뜻이 있습니다.
embed object video 3개의 기능은 비슷하지만 3개 다 웹표준에 맞는건 아닙니당
오브젝트와 비디오 가 웹표준에 맞다고 볼수 있어요
embed 는 오래전에 많이 사용했지만 그기능이 많이 모잘라 점점 사용횟수가 줄어들고 있습니다.
브라우저,버젼에 맞지 않으면 출력 되지 않기 때문이져 vieo 태그는 html5에 새롭게 생긴
태그입니다. 오브젝트를 현재 제일 많이 사용하고 있습니다.
embed 는 출력되지 않으면 그만이지만 오브젝트는 출력되지 않을시 여러방법으로 대체할수 있습니다.
<object data="파일이름.mpeg" type="video/mpeg">
<img src="파일이름.jpg" alt="브라우저나 버전이 안맞아 동영상을 재생할수 없습니다">
</object>
이런식으로 동영상이 지원되지않을경우 오브젝트 태그 안에 있는 파일을 출력시킬수 있습니다. alt 속성은 그림파일 위에 올려놓으면
나오는 메세지 입니다.
html5에서 새로 생긴 <video>태그는 이런기능이 추가 되었습니다.
-재생,일시중지,정지등 브라우저내의 자체컨트롤 가능하다.
-source속성을 이용해 파일을 여러개 지정해서 비디오/오디오 의 코덱종류나 파일확장자에 따라 맞는 것을 나오게 합니다
<video>
<source src="khw.mp4" type="video/mp4">
<source src="khw.ogg" type="video/ogg">
<object data="파일이름.mpeg" type="video/mpeg">
<p>이브라우저는 html5를 지원하지 않네요</p>
</object>
</video>
이렇게 작성하면 소스속성중 브라우저에서 지원하는 동영상이 재생되게끔 합니다.
그사이에 오브젝트태그를 넣은이유는 비디오 태그를 지원하지 않을경우에
오브젝트 태그로 재생시키게하기위해서입니다.
비디오속성을 보면
poster=비디오가 버퍼링이나 다운중일때 나오게 하는 이미지 지정
autoplay=페이지로딩되자마자 바로 재생
loop=무한재생
controls=비디오컨트롤러가 가능한 재생일시정지 사용가능하게한다
width=비디오의 넓이 조정
height=비디오의 높이 조정
넓이나 높이는 안써도 되지만 쓰게 되면 페이지 로딩속도를 좀더 높여줍니다
'xhtml' 카테고리의 다른 글
레이어 팝업 [클릭시 띄우기] (0) | 2013.05.14 |
---|---|
페이스북 (0) | 2013.04.25 |
자주 쓰는 태그 (0) | 2013.04.11 |