我的嵌入代码中有rel=0,所以当视频结束时,它会返回到开始。但是它显示的是视频的缩略图,返回后,缩略图被炸成完整的视频大小,所以图像非常模糊。我怎样才能得到我上传的完整1280 x 720图像以显示拇指呢?
谢谢
发布于 2014-06-26 12:40:23
例如,您可以检测视频何时结束,然后将视频与您的图像重叠。例如:
HTML:
<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&enablejsapi=1&rel=0&start=248" frameborder="0" allowfullscreen></iframe>
<!--Seems like people always forget to encode & as &-->
<!--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'> </div>
</div>CSS:
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 */
}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:
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/
发布于 2014-09-04 13:14:24
我也遇到了同样的问题,但问题并没有自行解决。我就是这样解决这个问题的:
我使用youtube iframe,并在视频结束后将视频重卷到开始,这样,缩略图看起来就像加载页面时一样好。
YoutubeF是iframe id。
代码:
var YTplayer;
function onYouTubeIframeAPIReady()
{
YTplayer = new YT.Player('YoutubeF', { events: { 'onStateChange': onYTPlayerStateChange } });
}
function onYTPlayerStateChange(event)
{
if (event.data == 0)
{
YTplayer.seekTo(0, false)
}
}享受吧!
https://stackoverflow.com/questions/24258370
复制相似问题