Forum : video dans html 5

Je ne crois pas qu'une vidéo puisse se jouer si tu quittes la page.

@FloFlo91 : oui mais justement, il veut utiliser de l'ajax pour ne pas quitter la page, avec ce principe tu va juste charger des données dans un endroit cible, une div par exemple et justement dans le tutoriel, c'est ce que fait grafikart.

@gurwal : il faut bien comprendre que grafikart, recharge le contenu d'une div principale content ou quelque chose du genre, bref, il te suffit de prendre ta page index.html et d'ajouter ton code avant la div dans laquelle grafikart remplace les données. Si tu veux plus de précision donne nous le code de page principale. Comme je te l'ai dit ça doit être index.html ou index.php

gurwal

Auteur

Salut et merci Lud00 de ta réponse méga rapide^^,

je te met la page template.html pour que tu vois, je t'avoue que me maitrise mal l'AJAX et si tu peux m'aider à la compléter ce serait super sympa.
c'est une page déjà faite que l'on m'a donné pour que je puisse l'exploiter
A+

<!DOCTYPE html>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>WebTV-Online</title>

    <link rel="stylesheet" type="text/css" href="styles.css" />

    <!--[if IE]>

    <style type="text/css">
    .clear {
      zoom: 1;
      display: block;
    }
    </style>

    <![endif]-->

</head>

<body>

    <div class="section" id="page"> <!-- Defining the #page section with the section tag -->

        <div class="header"> <!-- Defining the header section of the page with the appropriate tag -->

            <h1>Your Logo</h1>
            <h3>and a fancy slogan</h3>

            <div class="nav clear"> <!-- The nav link semantically marks your main site navigation -->
                <ul>
                    <li><a href="#article1">Photoshoot</a></li>
                    <li><a href="#article2">Sweet Tabs</a></li>
                    <li><a href="#article3">Navigation Menu</a></li>
                </ul>
            </div>

        </div>

        <div class="section" id="articles"> <!-- A new section with the articles -->

            <!-- Article 1 start -->

            <div class="line"></div>  <!-- Dividing line -->

            <div class="article" id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
                <h2>Photoshoot Effect</h2>

                <div class="line"></div>

                <div class="articleBody clear">

                    <video width="400" height="222" controls="controls" autoplay="true" autoplay controls loop>
                        <source src="videos/Avengers2.mp4" type="video/mp4" />
                        <source src="videos/vid1.webm" type="video/webm" />
                        <source src="video.ogv" type="video/ogg" />
                            Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
                    </video>

                    <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio. </p>
                </div>
            </div>

            <!-- Article 1 end -->

        </div>

    <div class="footer"> <!-- Marking the footer section -->

      <div class="line"></div>

       <p>mon site web</p> <!-- Change the copyright notice -->

       <a href="#" class="up">Go UP</a>

    </div>

    </div> <!-- Closing the #page section -->

    <!-- JavaScript Includes -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>

</html>

1ud0v1c

Peux-tu également mettre le contenu du fichier script.js, s'il te plait :) !

gurwal

Auteur

voila :)

$(document).ready(function(){
/ This code is executed after the DOM has been completely loaded /

$('.nav a,.footer a.up').click(function(e){

    // If a link has been clicked, scroll the page to the link's hash target:

    $.scrollTo( this.hash || 0, 1500);
    e.preventDefault();
});

});

merci Lud00

1ud0v1c

Ah oui, mais alors pour l'instant tu n'as pas intégré, le code de grafikart dans ton projet ? Grosso modo, si tu suis le tutoriel tu devrais pas avoir trop de soucis x), actuellement ta vidéo et dans la div articleBody, si tu l'externalises et la mets au dessus, qqch du genre :

<video width="400" height="222" controls="controls" autoplay="true" autoplay controls loop>
    <source src="videos/Avengers2.mp4" type="video/mp4" />
    <source src="videos/vid1.webm" type="video/webm" />
    <source src="video.ogv" type="video/ogg" />
        Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>

<div class="article" id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
    <h2>Photoshoot Effect</h2>

    <div class="line"></div>

    <div class="articleBody clear">
        <p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio. </p>
    </div>
</div>

Tu pourras remplacer, ta div article par le contenu d'une autre page sans avoir à recharger la page grâce à de l'ajax. Si tu suis bien le tutoriel tu as juste à remplacer :

$("#contenu") par $(".article")

Avec peut-être quelques autres modifications je n'ai plus le tutoriel en tête ^_^. Tu ne connais pas du tout le javascript ou jquery ?

gurwal

Auteur

non pas encore, c'est pour ça que je passe par le forum car la vidéo de graphikart bien que bien expliqué me paume un peu, et dans ce cas je demande l'aide de gens comme toi qui m'aide à les faire et après je me repasse les tutos plusieus fois en comparant mon original à la modif qu'on m'a fait pour mieux intégré^^

Mais d'après toi selon les deux fichiers que je t'ai mis, ya t-il de grosse modif à faire ou non ? peut-tu me faire un exemple ou est-ce trop fastidieux ?

merci de l'aide et du temps en tout cas^^
je vais rarement demander de l'aide sur les forums en général c'est moi qui aide, mais quand je demande c'est que j'ai une lacune manifeste ^^, mais quand on me mache le boulot a me permet de m'entrainer après a les reproduire, j'apprends mieux comme ça :)

1ud0v1c

Moi je veux bien te mâcher le travail mais ça ne t'aidera pas :/. Ici par exemple avec le tutoriel de grafikart et ta page, je ne vois pas ce qui te bloques, qu'est-ce qui t'embêtes ? Je pense qu'il vaut mieux que tu essayes par toi même d'abord et ensuite on t'aidera, honnêtement tu apprendras mieux et sera beaucoup plus efficace par la suite.

Bref, c'est à toi de voir, voici une solution en tout cas, la vidéo se lance et tu peux naviguer entre les différentes pages ! Je ne connais pas trop l'hébergeur donc ne tarde pas à télécharger l'archive ^_^.

Ps : je te laisse rajouter ce qu'il manque, j'ai fait fonctionnel, mais il manque par exemple les animations !

gurwal

Auteur

je vais essayer, je te retient au courant

Merci pour ton temps et ton aide.

1ud0v1c

Salut !
As-tu réussi à t'en sortir ?

StarTechs

Hésite pas à nous montrer ton script et à expliquer ta logique on sera ravi de t'aider si ça peut t'éviter de galérer pendant une semaine ;)

video dans html 5

11 réponses