如何使用自动播放缩略图嵌入YouTube视频

Question

我想嵌入一个YouTube视频，但它应该有一个自动播放海报/缩略图。

例如https://asana.com/它有一个嵌入式视频，但如果用户点击了播放按钮，它就会播放。否则，另一个视频将继续播放。

Answer 1

如果我正确理解了这个问题，你想要一个视频自动播放，并且onclick，你想要播放另一个视频吗？

如果是这样，请看看这个：

<div class="the_container">
    <video style="top: 0px; left: 0px; position: absolute; width: 100%; cursor: pointer;" id="bg-video" autoplay="true" loop="loop" preload="metadata" muted="muted">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg" />
    </video>
    <div style="top: 0px; left: 0px; position: absolute; width: 100%; display: none;" id="fg-plyr">
        <div data-video-id="bTqVqk7FSmY" data-type="youtube"></div>
    </div>
</div>
<script>
    $(document).ready(function() {
        player1 = $('#bg-video');
        player2 = plyr.setup('#fg-plyr')[0];

        player1.on('click', function() {
            document.getElementById("bg-video").pause();
            document.getElementById("fg-plyr").style.display = "block";
            document.getElementById("bg-video").style.display = "none";
        });
    });
</script>

所以你需要做的就是将第一个＆＃34; src＆＃34;更改为视频，你想在后台播放，然后更改＆＃34; data-video-id＆＃ 34;当您点击BG-Video时，您想要播放yt-video-id。 而且，您还需要导入plyr，所以这里有一个指向codepen上完整东西的链接：http://codepen.io/anthyG/pen/WwJojB

您可以添加类似主权的内容，用户可以通过BG-Video查看。

您也可以考虑使用像@mlegg这样的HTML5-Video-Poster

Answer 2

大多数移动设备都禁用了自动播放功能。 这是你想要做的吗？ http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster