web-dev-qa-db-ja.com

プレーヤーを使用せずに、Youtube / VimeoでHTML5ビデオをホストする

次の<video>タグを使用して、Webサイトの背景としてHTML5ビデオを再生します。

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

現時点では、これをWebサーバーでホストしていますが、理想的には、無料で利用可能なビデオサイトの1つでホストしたいと思います。 YouTubeまたはVimeo。プレイヤーの1人を埋め込むことなく、これを行うことは可能ですか？注意：これはモバイルで動作する必要はありません

web-hostingvideo
5
George Edwards

YoutubeとVimeoを使用して動画を無料でホストできますが、 Zhaph のような独自の広告が埋め込まれているため、ファイルに直接アクセスすることはできません。

それを選択した場合、 Video.js playerを使用すると、よりパーソナライズされたユーザーエクスペリエンスを提供できます。

もう1つの一般的なオプションは、 Simon のようにCDNを使用することです。
Cloudflare を使用し、非常に満足しています。

1
Ronen Teva

あなたが正しく理解していれば、自動的に再生され、youtubeでホストされ、テキストをオーバーレイできるビデオをバックグラウンドで表示しようとしています。

それがあなたが探しているものなら、次の解決策があなたのために働くはずです。

2つのdivを使用できると思います。1つのdivでyoutubeビデオを背景として使用し、もう1つのdivを使用してオーバーレイするコンテンツをホストできます

Stackexchangeネットワークで提供される2つのソリューションを混合し、これを思い付きました。

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

参照：

  1. YouTubeのコントロールを隠す
  2. divを別のdivにオーバーレイする方法
0
Mayank Gupta

YouTubeでバックグラウンドミュージックを取得するのは簡単で、モバイルでも機能します。

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

Iframeを0x0に設定すると、ビデオが表示されなくなり、自動再生オプションを使用して音楽が自動的に開始されます

編集：申し訳ありませんが、私は間違って解釈しました。これはバックグラウンドミュージック専用です。

0
HAlex