首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >为什么视频在结束时会回到模糊的拇指?

为什么视频在结束时会回到模糊的拇指?
EN

Stack Overflow用户
提问于 2014-06-17 07:45:41
回答 2查看 714关注 0票数 1

我的嵌入代码中有rel=0,所以当视频结束时,它会返回到开始。但是它显示的是视频的缩略图,返回后,缩略图被炸成完整的视频大小,所以图像非常模糊。我怎样才能得到我上传的完整1280 x 720图像以显示拇指呢?

谢谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-06-26 12:40:23

例如,您可以检测视频何时结束,然后将视频与您的图像重叠。例如:

HTML:

代码语言:javascript
复制
<script src="//www.youtube.com/iframe_api"></script>
<div id='yt_container'>
    <iframe id='element_id' width="853" height="480" src="//www.youtube.com/embed/LqeN31x-5gE?autoplay=1&amp;enablejsapi=1&amp;rel=0&amp;start=248" frameborder="0" allowfullscreen></iframe>
    <!--Seems like people always forget to encode & as &amp;-->
    <!--The "start" parameter was added for easier testing-->
    <!--The `enablejsapi=1` parameter is required for this to work. For more information, see https://developers.google.com/youtube/iframe_api_reference
    <div  id='player_overlay_image'>&nbsp;</div>
</div>

CSS:

代码语言:javascript
复制
iframe,img,div{/*If you use this on a real web page, you will want to make these rules more specific*/
    padding:0;
    margin:0        
}

div#yt_container{
    position:relative;/* https://stackoverflow.com/a/105035/1419007 */
}
代码语言:javascript
复制
div#player_overlay_image{/* The high-resolution image for when your video has ended. Includes a ▶ button. */
    display:block;
    position:absolute;
    top: 29px;
    background: url('//i.imgur.com/JhDUWdI.png');
    width:853px;
    height:408px;
    display: none;
    cursor:pointer;
}

div#player_overlay_image:hover{/* ▶ button in active state. */
    background: url(//i.imgur.com/ljKjsD4.png);
}

JavaScript:

代码语言:javascript
复制
var yt_player;
function onYouTubeIframeAPIReady() {
    yt_player = new YT.Player('element_id', {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event) {
    if(event.data === YT.PlayerState.ENDED){
        //Display overlay image
        document.getElementById('player_overlay_image').style.display='block';
    }
}

document.getElementById('player_overlay_image').addEventListener('click', function(evt){                                                         
    //Hide overlay image
    document.getElementById('player_overlay_image').style.display='none';

    //Play video
    yt_player.playVideo();
}, false);

(有关更多信息,请参见iframe嵌入的YouTube播放器API参考。)

http://jsfiddle.net/y3Xqj/1/

票数 1
EN

Stack Overflow用户

发布于 2014-09-04 13:14:24

我也遇到了同样的问题,但问题并没有自行解决。我就是这样解决这个问题的:

我使用youtube iframe,并在视频结束后将视频重卷到开始,这样,缩略图看起来就像加载页面时一样好。

YoutubeF是iframe id。

代码:

代码语言:javascript
复制
var YTplayer;

function onYouTubeIframeAPIReady()
{
    YTplayer = new YT.Player('YoutubeF', { events: { 'onStateChange': onYTPlayerStateChange } });
}

function onYTPlayerStateChange(event)
{
    if (event.data == 0)
    {
        YTplayer.seekTo(0, false)
    }
}

享受吧!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24258370

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档