【发布时间】：2013-10-14 20:01:43
【问题描述】：
我需要有关此脚本的帮助，该脚本通过 Christian Heilmann 编写的 css3 和 js 转换视频。 它适用于 safari 和 chrome，但不适用于 firefox...任何人都可以告诉我为什么？
这是查看示例页面的链接：http://sickmind.it/videotransform/transform_video.html
这就是小提琴：http://jsfiddle.net/mioii/c4Qtc/7/
js代码是这样的：
(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/transforming-video.html 我无法联系作者询问信息，希望有人能帮助我！ 谢谢大家！
【问题讨论】：
-
好的。 Safari 和 chrome 使用 webkit 引擎来渲染和显示 HTML，而 firefox 使用 Gecko。这会导致差异。使用了 webkit 支持的 CSS3 属性，不幸的是，由于相同的原因，Firefox 可能/可能不支持它们
-
@AkshayKhandelwal — 教程 URL 在 Firefox 中运行良好（Christian Heilmann 为 Mozilla 基金会工作！）。
-
大家好！小提琴已更新，并且 Quentin 的代码和链接的 .ogv 文件可以工作......在 jsfiddle.net 但在我的页面上没有，因为有人知道为什么吗？ sickmind.it/videotransform/transform_video.html
标签： javascript css firefox video cross-browser