Ich glaube nicht, dass Sie die reale Taste ändern können, aber man könnte es umgehen:
- den Spieler
- Hier die Vorschau wie beschrieben here und legte ihn auf Ihrer Seite in der gleichen ausblenden Position und Größe des Spielers
- Wenn du auf dein Play - Symbol klickst, kannst du das Thumbnail und dein Play - Symbol ausblenden, den Player anzeigen und die YouTube - API wie in deinem Link verwenden Video
Fiddle
//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>
Ich denke, dass dies die ony way.Thank Sie ist. – user3573535
Leider spielt der Player in mobilen Browsern nicht programmatisch – Alireza