2
css3 및 js로 비디오를 변형시키는이 스크립트의 도움이 Christian Heilmann이 작성했습니다. 사파리와 크롬에서 작동하지만 파이어 폭스에서는 작동하지 않습니다 ... 아무도 왜 저에게 말할 수 있습니까? 브라우저 비 호환성 Firefox
이
는 exemple 페이지를 볼 수있는 링크입니다 : http://sickmind.it/videotransform/transform_video.html를이는 바이올린입니다 :
(function(){
/* predefine zoom and rotate */
var zoom = 1,
rotate = 0;
/* Grab the necessary DOM elements */
var stage = document.getElementById('stage'),
v = document.getElementsByTagName('video')[0],
controls = document.getElementById('controls');
/* Array of possible browser specific settings for transformation */
var properties = ['transform', 'WebkitTransform', 'MozTransform',
'msTransform', 'OTransform'],
prop = properties[0];
/* Iterators and stuff */
var i,j,t;
/* Find out which CSS transform the browser supports */
for(i=0,j=properties.length;i<j;i++){
if(typeof stage.style[properties[i]] !== 'undefined'){
prop = properties[i];
break;
}
}
/* Position video */
v.style.left = 0;
v.style.top = 0;
/* If there is a controls element, add the player buttons */
/* TODO: why does Opera not display the rotation buttons? */
if(controls){
controls.innerHTML = '<button class="play">play</button>'+
'<div id="change">' +
'<button class="zoomin">+</button>' +
'<button class="zoomout">-</button>' +
'<button class="left">⇠</button>' +
'<button class="right">⇢</button>' +
'<button class="up">⇡</button>' +
'<button class="down">⇣</button>' +
'<button class="rotateleft">↻</button>' +
'<button class="rotateright">↺</button>' +
'<button class="reset">reset</button>' +
'</div>';
}
/* If a button was clicked (uses event delegation)...*/
controls.addEventListener('click',function(e){
t = e.target;
if(t.nodeName.toLowerCase()==='button'){
/* Check the class name of the button and act accordingly */
switch(t.className){
/* Toggle play functionality and button label */
case 'play':
if(v.paused){
v.play();
t.innerHTML = 'pause';
} else {
v.pause();
t.innerHTML = 'play';
}
break;
/* Increase zoom and set the transformation */
case 'zoomin':
zoom = zoom + 0.1;
v.style[prop]='scale('+zoom+') rotate('+rotate+'deg)';
break;
/* Decrease zoom and set the transformation */
case 'zoomout':
zoom = zoom - 0.1;
v.style[prop]='scale('+zoom+') rotate('+rotate+'deg)';
break;
/* Increase rotation and set the transformation */
case 'rotateleft':
rotate = rotate + 5;
v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')';
break;
/* Decrease rotation and set the transformation */
case 'rotateright':
rotate = rotate - 5;
v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')';
break;
/* Move video around by reading its left/top and altering it */
case 'left':
v.style.left = (parseInt(v.style.left,10) - 5) + 'px';
break;
case 'right':
v.style.left = (parseInt(v.style.left,10) + 5) + 'px';
break;
case 'up':
v.style.top = (parseInt(v.style.top,10) - 5) + 'px';
break;
case 'down':
v.style.top = (parseInt(v.style.top,10) + 5) + 'px';
break;
/* Reset all to default */
case 'reset':
zoom = 1;
rotate = 0;
v.style.top = 0 + 'px';
v.style.left = 0 + 'px';
v.style[prop]='rotate('+rotate+'deg) scale('+zoom+')';
break;
}
e.preventDefault();
}
},false);
})();
/*
Zooming and rotating HTML5 video player
Homepage: http://github.com/codepo8/rotatezoomHTML5video
Copyright (c) 2011 Christian Heilmann
Code licensed under the BSD License:
http://wait-till-i.com/license.txt
*/
isithackday.com/hacks/videozoomandrotate : http://jsfiddle.net/mioii/c4Qtc/7/
JS 코드는 이것이다 /transforming-video.html 저자에게 정보를 요청할 수 없으므로 누군가가 나를 도울 수 있기를 바랍니다! 감사합니다!
확인합니다. 사파리와 크롬은 웹킷 엔진을 사용하여 HTML을 렌더링하고 표시하며 파이어 폭스는 게코를 사용합니다. 차이가 생깁니다. webkit에서 지원하는 CSS3 속성이 사용되며 불행히도 firefox가 동일한 이유로 지원하지 않을 수도 있습니다 –
피들에 동영상이 포함되어 있지 않습니다. 비디오에 http : //path.mp4 또는 http : //path.ogg를 추가하고 바이올린을 업데이트하십시오. –
@AkshayKhandelwal - 튜토리얼 URL은 Firefox에서 잘 작동합니다 (Christian Heilmann은 Mozilla 재단에서 일합니다!). – Quentin