Fatal编程技术网
  • video/
  • Video YouTube嵌入视频：设置不同的缩略图

Video YouTube嵌入视频：设置不同的缩略图

video youtube

Video YouTube嵌入视频：设置不同的缩略图,video,youtube,Video,Youtube,我想从YouTube嵌入一个不是我的视频（所以我不能在YouTube上更改它）。视频有一个不代表视频的缩略图（我指的是嵌入视频时显示的初始静止图像，在用户播放视频之前显示） 是否有一种方法可以设置静止时间，例如，我尝试通过？s=XXX，但这不起作用。或者是YouTube固有的另一种方式 没有。大多数YouTube视频只有一个预生成的“海报”缩略图（480x360）。它们通常有其他几个较低分辨率的缩略图（120x90）。因此，即使有一个嵌入参数来使用替代海报图像（没有），其结果也不会被接受 从理论

我想从YouTube嵌入一个不是我的视频（所以我不能在YouTube上更改它）。视频有一个不代表视频的缩略图（我指的是嵌入视频时显示的初始静止图像，在用户播放视频之前显示）

是否有一种方法可以设置静止时间，例如，我尝试通过
？s=XXX
，但这不起作用。或者是YouTube固有的另一种方式

没有。大多数YouTube视频只有一个预生成的“海报”缩略图（480x360）。它们通常有其他几个较低分辨率的缩略图（120x90）。因此，即使有一个嵌入参数来使用替代海报图像（没有），其结果也不会被接受

从理论上讲，您可以使用播放器API将视频搜索到您想要的任何位置，但这将是一个主要的黑客攻击，只会产生一个次要的结果。

在以下方面有一个很好的解决方法：
注意：为了避免必须单击两次才能播放视频，请在视频嵌入代码中使用
autoplay=1
。当显示第二个div时，它将开始播放。

您最好使用上的教程。 这将确保没有双击，并且YouTube的视频不会在点击之前自动播放在图像后面

不要像YT（YouTube）那样插入YouTube嵌入代码（您可以尝试，但它将是ganky）…相反，只需将视频嵌入代码中的源代码替换为“&autoplay=1”（保留原样）

YT给出的原始代码：

`<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>`

`<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess"value="always" /><param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object>`

``
教程中使用的代码与YT src相同：

`<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>`

`<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess"value="always" /><param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object>`

``
除此之外，只需将img源和路径替换为您自己的，瞧

我在waldir解决方案的自动播放上遇到了问题。。。使用autoplay，视频在加载页面时播放，而不是在显示div时播放

为我工作，除了我替换

<a class="introVid" href="#video">Watch the video</a></p>
与
这样它就可以用我的缩略图来代替文本链接。

答案对我来说不合适。也许它们已经过时了

无论如何，找到了这个网站，它为你做了所有的工作，甚至让你不需要像往常一样阅读不清楚的谷歌文档：
只需将代码复制并粘贴到HTML文件中即可。享受快乐的编码。 使用Youtube api管理Youtube嵌入式视频的缩略图

<!DOCTYPE html>
<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                }
            });
        }

        function onPlayerReady(event) {
            $('#play_vid').click(function() {
                event.target.playVideo();
            });
        }

        $(document).ready(function() {
            $('#player').hide();
            $('#play_vid').click(function() {
                $('#player').show();
                $('#play_vid').hide();
            });
        });
    </script>

    <div id="player"></div>
    <img id="play_vid" src="YOUR_IMAGE_PATH" />
</body>
</html>


var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
“onReady”：onPlayerReady，
}
});
}
函数onPlayerReady（事件）{
$（“#播放视频”）。单击（函数（）{
event.target.playVideo（）；
});
}
$（文档）.ready（函数（）{
$（“#播放器”）.hide（）；
$（“#播放视频”）。单击（函数（）{
$（“#播放器”）.show（）；
$（'play#vid'）.hide（）；
});
});
使用Waldyrios回答中的概念，我创建了以下解决方案，该解决方案还解决了在tab restore上的图像后面播放视频的问题，或者使用浏览器的“后退”按钮返回视频页面的问题

HTML jQuery是这个解决方案所必需的，它应该能够处理同一页面上的多个嵌入式视频（具有不同的lead图像）

该代码使用了两个图像
playdefault.png
和
playactive.png
，它们是YouTube播放按钮的小图像（42 x 30）
playdefault.png
为黑色，带有一定透明度，最初显示
play active.png
为红色，当用户将鼠标移到图像上时显示。这是一个普通的嵌入式YouTube视频显示的预期行为。

给了我以下结果，帮助我完成以下代码中的任务

<div onclick="play();" id="vidwrap" style="height:315px;width:560px;background: black url('http://example.com/image.jpg') no-repeat center;overflow:hidden;cursor:pointer;"></div>
<script type="text/javascript">
    function play(){
        document.getElementById('vidwrap').innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/xxxxxxxxx?autoplay=1" frameborder="0"></iframe>';
    }
</script>


函数播放（）{
document.getElementById（'vidwrap'）。innerHTML=''；
}
可以使用jQuery，这取决于您的站点加载时间，您可以调整超时时间。 它可以是您的自定义图像，也可以使用youtube图像maxres1.jpg、maxres2.jpg或maxres3.jpg

var newImage = 'http://i.ytimg.com/vi/[Video_ID]/maxres1.jpg';
window.setTimeout(function() {
jQuery('div > div.video-container-thumb > div > a > img').attr('src',newImage );
}, 300);
此解决方案将在单击时播放视频。您需要编辑图片以自己添加按钮图像

您需要图片的URL和YouTube视频ID。YouTube视频ID是URL中
v=
参数后的一部分，因此ID为
Dodlex4ZLQ


//改编自https://stackoverflow.com/a/32138108
变量监视器=设置间隔（函数（）{
var elem=document.activeElement；
如果（elem&&elem.id==“解锁视频”）{
document.getElementById（'vidimg'）.style.display='none'；
清除间隔（监视器）；
}
}, 100);
请确保在上述代码片段中替换URL\u to\u图片和YOUTUBE\u视频\u ID

为了弄清楚这里发生了什么，这会在视频顶部显示图像，但允许点击通过图像。脚本监视视频iframe中的单击，然后在单击发生时隐藏图像。您可能不需要
浮动：清除


我没有将其与这里的其他答案进行比较，但这就是我所使用的。
此解决方案是基于HTML和CSS的，使用z-index和hover，如果JS被禁用或视频不是您的（因为您可以在YouTube中添加缩略图），则此解决方案有效


<div onclick="play();" id="vidwrap" style="height:315px;width:560px;background: black url('http://example.com/image.jpg') no-repeat center;overflow:hidden;cursor:pointer;"></div>
<script type="text/javascript">
    function play(){
        document.getElementById('vidwrap').innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/xxxxxxxxx?autoplay=1" frameborder="0"></iframe>';
    }
</script>



var newImage = 'http://i.ytimg.com/vi/[Video_ID]/maxres1.jpg';
window.setTimeout(function() {
jQuery('div > div.video-container-thumb > div > a > img').attr('src',newImage );
}, 300);



<style>
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
}
.videoWrapper .video-modal-poster img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.videoWrapper .video-modal-poster:hover img {
  z-index:0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
<div class="videoWrapper">
  <a href="#" class="video-modal-poster">
    <img alt="" src="" width="353" height="199" />
    <iframe width="353" height="199" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  </a>
</div>