web-dev-qa-db-fra.com

Hébergement de vidéos HTML5 sur Youtube / Vimeo, sans utiliser le lecteur

J'utilise la balise <video> suivante pour lire une vidéo HTML5 en tant qu'arrière-plan sur mon site Web:

<video autoplay loop mob-hide>
    <source src="../Images/myvideo.mp4" type="video/mp4" />
    Your browser does not support the video tag. I suggest you upgrade your browser.</video>

Pour le moment, j'héberge cela sur mon serveur Web, mais j'aimerais idéalement l'héberger sur l'un des sites de vidéos disponibles gratuitement, par exemple. YouTube ou Vimeo. Est-il possible de le faire sans intégrer l'un de leurs joueurs? NB: cela ne nécessite pas de travailler sur mobile

web-hostingvideo
5
George Edwards

Vous pouvez utiliser Youtube et Vimeo pour héberger gratuitement vos vidéos. Toutefois, vous ne pourrez pas accéder directement aux fichiers, car ils intègrent leurs propres annonces telles que Zhaph .

Si vous choisissez de le faire, vous pouvez utiliser le lecteur Video.js afin de pouvoir offrir une expérience utilisateur plus personnalisée.

Une autre option populaire consiste à utiliser un CDN, comme Simon mentionné.
J'utilise Cloudflare et j'en suis très heureux.

1
Ronen Teva

Si je vous ai bien compris, vous essayez de montrer une vidéo en arrière-plan qui se lit automatiquement, est hébergée sur youtube et que vous pouvez superposer du texte dessus.

si c'est ce que vous recherchez, la solution suivante devrait fonctionner pour vous.

Je crois que vous pouvez utiliser deux div, une div avec une vidéo youtube peut servir d'arrière-plan et l'autre div peut être utilisée pour héberger le contenu que vous souhaitez superposer.

J'ai mélangé deux solutions fournies sur un réseau stackexchange et j'ai proposé ceci:

<html>
    <head>
        <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
        <script type="text/javascript">
            function showFrontLayer() {
                document.getElementById('bg_mask').style.visibility='visible';
                document.getElementById('frontlayer').style.visibility='visible';
            }
            function hideFrontLayer() {
                document.getElementById('bg_mask').style.visibility='hidden';
                document.getElementById('frontlayer').style.visibility='hidden';
            }
        </script>
        <style type="text/css">

        #bg_mask {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            margin-top: 0px;
            width: 981px;
            height: 610px;
            background : url("img_dot_white.jpg") center;
            z-index: 0;
            visibility: hidden;
        }

        #frontlayer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 70px 140px 175px 140px;
            padding : 30px;
            width: 700px;
            height: 400px;
            background-color: transparent;;
            visibility: hidden;
            border: 1px solid black;
            z-index: 1;

        }


        </style>
    </head>
<body>
<form action="test.html">
    <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

          <iframe width="100%" height="400" src="https://www.youtube.com/embed/BrEm2dcoFxo?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>
            <div id="bg_mask">
            <div id="frontlayer"><br/><br/>
                Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
                Use position: absolute to get the one div on top of another div.<br/><br/><br/>
                The bg_mask div is between baselayer and front layer.<br/><br/><br/>
                In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
                <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
            </div>
        </div>
    </div>
</form>
</body>
</html>

Référence:

  1. masquer les contrôles youtube
  2. comment superposer div sur un autre
0
Mayank Gupta

Obtenir une musique de fond avec YouTube est simple et fonctionne sur mobile:

<iframe width="0" height="0" src="https://www.youtube.com/embed/60ItHLz5WEA?autoplay=1" frameborder="0" allowfullscreen></iframe>

Définir l'iframe sur 0x0 signifie que vous ne pouvez pas voir la vidéo, l'option de lecture automatique est utilisée pour démarrer la musique automatiquement

Edit: désolé, je viens de mal interprété, ce n'est que pour la musique de fond.

0
HAlex