18041 sujets

Questions générales et questions de débutants

Comment mettre une video en arrière-plan

bonjour
Je travaille sur cc animate 2015, j'ai incorporé une vidéo mp4 par le biais de mon html5 jusque-là tout va bien, mais lorsque sur cc animate je veux mettre du texte ou un logo etc sur ma scène, rien n'apparaît quand je visualise mes animations sauf la vidéo bien sûr qui est en première plan apparemment et couvre toutes mes objets sur la scène de cc animate. Je ne connais pas grand chose sur le code html5 ou js mais j'aimerais qu'on me dise comment faire pour mettre ma vidéo dans mon html en arrière-plan pour que mes animations se voient Smiley decu
merci Smiley smile
Ah oui, une question de z-index, probablement, des position:absolute dans un conteneur en position:relative aussi ? à voir en détail mais là on n'a aucune info ...
merci farang Smiley ravi
Je sais que j'ai donné pas grand chose comme renseignements car je suis chez moi et mes codes sont à mon poste de travail et je viens de découvrir cet espace de questions en ligne et je n'y croyais pas trop Smiley eek . Merci de m'avoir répondu je pense que j'ai mis effectivement un truc comme obsolute et ça marche, je pensais qu'il y avait un autre truc du genre un terme "background " . Je vais voir demain pour donner plus amples renseignements Smiley biggrin
suite à mon mail d'hier, qui n'avait aucune infos:
voici mon code pour plus de compréhension: (je voulais que mes animations sur cc animate ne soient pas masquées par la vidéo, je l'ai mis donc en obslute (est-ce qu'une autre solution comme un code avec un background existe-aussi?) sinon je voulais mettre ma vidéo en transparence aussi un alpha ou opacity mais je sais pas à quel endroit il faut la mettre ??
voici mon code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11182-html5-vienne_car</title>
<!-- write your code here -->


<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="11182-html5-vienne_car.js?1469706351211"></script>
<script>
var canvas, stage, exportRoot;
function init() {

// --- write your JS code here ---

canvas = document.getElementById("canvas");
exportRoot = new lib._11182html5vienne_car();


stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();

createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}

</script>

<!-- write your code here -->

<style type="text/css">
.video {
position: absolute;


}
.canvas {
position: absolute;
}
</style>
</head>
<body onload="init();" style="background-color:FFFFFF;margin:0px;">
<div class="video">

<video autoplay loop title="bonjour">
<source src="http://e-media.ledauphine.com/videos/11182-html5-vienne_car.mp4" type="video/mp4">
</div>
<div class="canvas">
<canvas id="canvas" width="300" height="250"></canvas>
</div>




</body>
</html>

merci
oui thanks !! Smiley cligne
Je débute ou du moins je m'intéresse un peu plus au code et beaucoup de questions bêtes qui vont sûrement vous agacer Smiley decu . Je fais des essais et tente de m'améliorer Smiley rolleyes
Est-ce que vous savez comment on fait pour que ma video démarre sans le son et le son apparaît avec un effet de bouton survol en code html5 canvas? et où je dois l'insérer dans le code suivant?
Amicalement Vôtre Smiley biggrin

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gruss_essai</title>
<!-- write your code here -->


<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="gruss_essai.js?1469804634151"></script>
<script>
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---

canvas = document.getElementById("canvas");
images = images||{};

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
exportRoot = new lib.gruss_essai();

stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();

createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);

}

</script>

<style type="text/css">
.video {
position: absolute;
left: 392px;
}
.canvas {
position: absolute;
}
</style>
</head>
<body onload="init();" style="background-color:FFFFFF;margin:0px;">
<div class="video">
<video autoplay loop >
<source src="http://e-media.ledauphine.com/videos/gruss_video.mp4" type="video/mp4">
</div>
<div class="canvas">
<canvas id="canvas" width="1000" height="200"></canvas>
</div>



<script>
// Fonction pour récuperer la variable DEST_URL de destination passer dans l'iframe
function $_GET(param) {
var vars = {};
window.location.href.replace( location.hash, '' ).replace(
/[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
function( m, key, value ) { // callback
vars Smiley key = value !== undefined ? value : '';
}
);

if ( param ) {
return vars Smiley param ? vars Smiley param : null;
}
return vars;
}
// récuperation de la variable DEST_URL
var $_GET = $_GET(),
DEST_URL = $_GET['DEST_URL'];


// called by Stage.click function in Edge
function clickTAG(){
window.open( DEST_URL ,'_blank');
}
</script>
</body>
</html>
Sujet clos
Aller à