私はウェブサイトを作成しており、背景としてビデオ アセット (mp4 ファイル) を持っています。テストしたところ、Chrome/Explorer/Firefox で別の方法で表示されました。そのため、適合するようにコードに追加する必要があります。すべてのブラウザで。私のコードは次のとおりです。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<body style="width: 100%; height: 100%;">
<video width="1920" height="1080" controls autoplay loop= "loop">
<source src="background.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
$(function(){
var FancyPointer = function(){
// A revealing module pattern, to create an
// extensible pointer object.
var pointerIcons = [], // Array of pointers.
el, $el, // element to listen to
defaultImgSettings = {
src: 'globe.gif',
height: '30px',
width: '30px',
xPos: -15,
yPos: -15
};
function startPointing(){
$el.on("mousemove", function(e){
var evt = e;
$(pointerIcons).each(function(index, pointerEl){
$(pointerEl.imgEl).clone()
.css({
'position':'absolute',
'top':e.pageY+pointerEl.yPos,
'left':e.pageX+pointerEl.xPos,
'width': pointerEl.width,
'height': pointerEl.height
}).prependTo( $(document.body))
.fadeOut(500, 'linear', function(){
$(this).remove();
});
});
});
}
function addPointer(options){
var pointerEl = {};
pointerEl.src = options.src || defaultImgSettings.src;
pointerEl.height =options.height || defaultImgSettings.height;
pointerEl.width = options.width || defaultImgSettings.width;
pointerEl.xPos = options.xPos || defaultImgSettings.xPos;
pointerEl.yPos = options.yPos || defaultImgSettings.yPos;
pointerEl.imgEl = new Image();
pointerEl.imgEl.src = pointerEl.src;
$(pointerEl.imgEl).attr("height", pointerEl.height)
.attr("width", pointerEl.width);
pointerIcons.push(pointerEl);
}
function init(element){
// the required option for the init should be the element in which we'll be listening.
// If there is also an array included, the array should contain a number of options for
// the addPointer function. Otherwise, the user will need to manually call addPointer with
// each pointer to be added.
el = element; // Save the original element
$el = $(el); // also create a jQuery-wrapped reference for later use.
// Now here, we create an array, containing all the additional parameters after the first
var args = Array.prototype.slice.call(arguments, 1);
// Now, iterate over all these additional arguments. If we have any, assume them to be
// the options for addPointer (see above).
if(args){
$(args).each(function(index, pointerEl){
addPointer(pointerEl);
});
}
startPointing();
}
return {
init: init,
add: addPointer
};
}();
FancyPointer.init("body",
{
src: 'globe.gif',
width: '80px',
height: '80px',
xPos: -40,
yPos: -40
},
{
src: 'smartphone.gif',
width: '60px',
height: '60px',
xPos: 25,
yPos: 25
}, {
src: 'monitor.gif',
width: '50px',
height: '50px',
xPos: 30,
yPos: -80
},
{
src: 'tablet.gif',
width: '55px',
height: '55px',
xPos: -85,
yPos: -85
},
{
src: 'laptop.gif',
width: '50px',
height: '50px',
xPos: -80,
yPos: 30
},
{
src: 'chain.gif',
width: '30px',
height: '30px',
xPos: -45,
yPos: -50
},
{
src: 'chain.gif',
width: '30px',
height: '30px',
xPos: 15,
yPos: 10
},
{
src: 'chain1.gif',
width: '30px',
height: '30px',
xPos: -45,
yPos: 10
},
{
src: 'chain1.gif',
width: '30px',
height: '30px',
xPos: 25,
yPos: -60
});
$("#addTrailer").on("click", function(){
$(this).hide();
FancyPointer.add({
src: 'trail4.gif',
width: '100px',
height: '100px',
xPos: -45,
yPos: 25
});
})
});
;</script>
</body>
</html>
誰でもそれで私を助けることができますか？前もって感謝します Alejandro Castan PS: 私の小さな英語で申し訳ありません....