나는 이것을 css "border-radius : 100 %;"에서 시도했지만 100 % 원을주지는 않는다.
다음은 CSS와 HTML입니다.
HTML
<div class="web-cam">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</div>
CSS
.web-cam video {
width: 250px;
height: 250px;
border-radius: 100%;
position: absolute;
top: 0px;
z-index: 5;
}
포함하는 div와 동영상 요소의 스타일을 개별적으로 지정합니다. -webkit-mask-image 포함하는 div에 a 를 추가하십시오 .
-webkit-mask-imageCSS 속성은 요소의 마스크 화상을 설정한다. 마스크 이미지는 마스크 이미지의 투명도에 따라 요소의 보이는 부분을 자릅니다.
아래 코드는 마스크로 사용할 임의의 원형 방사형 그래디언트를 생성하지만 url()클리핑 마스크에 대한 온라인 원형 PNG 이미지를 지정하는 데 사용할 수도 있습니다 ( Mozilla의 doc에 제시됨 ).
HTML :
<div class="web-cam">
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</div>
CSS :
.web-cam {
width: 250px;
height: 250px;
border-radius: 125px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
video {
width: 500px;
height: 500px;
position: absolute;
top: -125px;
left: -125px;
}
안타깝게도 기본 컨트롤러를 잃게되지만 사용자 지정 컨트롤러를 빌드하는 방법에는 여러 가지가 있습니다.
http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos
http://dev.opera.com/articles/custom-html5-video-player-with-css3-and-jquery/#sec1
http://www.adobe.com/devnet/html5/articles/html5-multimedia-pt3.html
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다