it-swarm.com.de

Hosten von HTML5-Videos auf Youtube / Vimeo, ohne den Player zu verwenden

Ich verwende das folgende <video> -Tag, um ein HTML5-Video als Hintergrund auf meiner Website abzuspielen:

<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>

Im Moment hoste ich dies auf meinem Webserver, möchte es aber idealerweise auf einer der frei verfügbaren Video-Sites hosten, z. YouTube oder Vimeo. Ist es möglich, dies zu tun, ohne einen ihrer Spieler einzubetten? NB: Dies muss nicht auf dem Handy funktionieren

5
George Edwards

Sie können Youtube und Vimeo verwenden, um Ihre Videos kostenlos zu hosten. Sie können jedoch nicht direkt auf die Dateien zugreifen, da sie ihre eigenen Anzeigen wie Zhaph enthalten.

Wenn Sie sich dafür entscheiden, können Sie den Video.js Player verwenden, um eine personalisiertere Benutzererfahrung zu erzielen.

Eine andere beliebte Option ist die Verwendung einer CDN, wie Simon erwähnt.
Ich benutze Cloudflare und bin sehr zufrieden damit.

1
Ronen Teva

Wenn ich Sie richtig verstanden habe, versuchen Sie, ein Video im Hintergrund anzuzeigen, das automatisch abgespielt wird, auf youtube gehostet wird und das Sie mit Text überlagern können.

wenn Sie danach suchen, sollte die folgende Lösung für Sie funktionieren.

Ich glaube, Sie können zwei div verwenden, ein div mit Youtube-Video kann als Hintergrund fungieren und das andere div kann zum Hosten des Inhalts verwendet werden, den Sie überlagern möchten

Ich habe zwei Lösungen gemischt, die im StackExchange-Netzwerk bereitgestellt wurden.

<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>

Referenz:

  1. YouTube-Steuerelemente ausblenden
  2. wie div über ein anderes gelegt wird
0
Mayank Gupta

Das Abrufen von Hintergrundmusik mit YouTube ist einfach und funktioniert auf Mobilgeräten:

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

Wenn Sie den Iframe auf 0x0 setzen, können Sie das Video nicht sehen. Die Autoplay-Option wird verwendet, um die Musik automatisch zu starten

Edit: sorry, ich habe das nur falsch interpretiert, das ist nur für Hintergrundmusik.

0
HAlex