Javascript Youtube - 自定义播放图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32627887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Youtube - custom play icon
提问by user3573535
I wanted to ask, if can i change Youtube embbeded video play icon ? I found this post: Can I change the play icon of embedded youtube videos?But this button is on top of orginal play icon, so if i use something transparent, orginal play icon will be visible.
我想问一下，是否可以更改 Youtube 嵌入的视频播放图标？我找到了这篇文章： 我可以更改嵌入式 YouTube 视频的播放图标吗？但是这个按钮在原始播放图标的顶部，所以如果我使用透明的东西，原始播放图标将是可见的。
Thank you for help.
谢谢你的帮助。
回答by Tom Doodler
I don't think you can change the real button, but you could work around it:
我不认为你可以改变真正的按钮，但你可以解决它：
- Hide the player
- Get the thumbnail like described hereand put it on your page in the same position and size of the player
- Put your own play icon over the thumbnail
- When your play icon gets clicked, hide the thumbnail and your play icon, show the player and use the YouTube API like in your link to start the video
- 隐藏玩家
- 获取此处描述的缩略图并将其放在您的页面上与播放器相同的位置和大小
- 将您自己的播放图标放在缩略图上
- 点击播放图标后，隐藏缩略图和播放图标，显示播放器并使用链接中的 YouTube API 开始播放视频
//youtube script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
onYouTubeIframeAPIReady = function () {
player = new YT.Player('player', {
height: '244',
width: '434',
videoId: 'AkyQgpqRyBY', // youtube video id
playerVars: {
'autoplay': 0,
'rel': 0,
'showinfo': 0
},
events: {
'onStateChange': onPlayerStateChange
}
});
}
var p = document.getElementById ("player");
$(p).hide();
var t = document.getElementById ("thumbnail");
t.src = "http://img.youtube.com/vi/AkyQgpqRyBY/0.jpg";
onPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.ENDED) {
$('.start-video').fadeIn('normal');
}
}
$(document).on('click', '.start-video', function () {
$(this).hide();
$("#player").show();
$("#thumbnail_container").hide();
player.playVideo();
});.start-video {
position: absolute;
top: 80px;
padding: 12px;
left: 174px;
opacity: .3;
cursor: pointer;
transition: all 0.3s;
}
.start-video:hover
{
opacity: 1;
-webkit-filter: brightness (1);
}
div.thumbnail_container
{
width: 434px;
height: 244px;
overflow: hidden;
background-color: #000;
}
img.thumbnail
{
margin-top: -50px;
opacity: 0.5;
}<div id="player"></div>
<div id="thumbnail_container" class="thumbnail_container">
<img class="thumbnail" id="thumbnail" />
</div>
<a class="start-video"><img width="64" src="http://image.flaticon.com/icons/png/512/0/375.png" style="filter: invert(100%); -webkit-filter: invert(100%);"></a>