我正在使用YouTube嵌入式视频Javascript API暂停并查找刚刚结束的视频的开头，然后显示该视频的默认图像，所有这些都可以使用。但是，尽管我可以单击此默认图像来再次播放倒带的视频，但它不会显示带有向右指向的三角形的YouTube圆形框，该框告诉用户可以通过单击来再次播放视频。
如何使YouTube API用方框/三角形显示初始图像，而不是仅显示默认图像？
这是我当前正在使用的代码，在这里不起作用，但是在CodePen中可以正常工作：
var youTubePlayer;
//
// Hide videos' default imange and play the video
// again.
//
function imgClick( This ) {
var $image = $( This );
if( $image.css( 'display' ) !== 'none' ) {
$image.css( { 'display' : 'none',
'z-index' : '-1' } );
youTubePlayer.playVideo();
}
return false;
}
//
// YouTube Embedded Video JavaScript API Ready Handler
//
// Create the necessary event handler to capture when
// the video finishes playing to the end.
//
function onYouTubeIframeAPIReady() {
'use strict';
const ALLOWS = 'accelerometer; autoplay; ' +
'clipboard-write; ' +
'encrypted-media; gyroscope; ' +
'picture-in-picture';
var iframe = document
.querySelector( 'iframe' +
':first-of-type' );
var suggestedQuality = 'tiny';
var name = 'a_blank';
//
// Create an array from the URL, delimited by
// / or ?, so the YouTube Video Id, each parameter
// switch name and value goes into an erray element.
//
var url_parameters =
iframe.src
.split( /\s*(\/embed\/|[?&=])\s*/ );
//
// Throw away the first element that is the URL
// address up to, but not /embed/, and then if the
// new first element is /embed/, then remove it, and
// assign it to videoid.
//
var videoid = ( ( url_parameters.shift(),
url_parameters.shift() ===
'/embed/' )
? url_parameters.shift()
: '' );
//
// Create the YouTube query parameters default
// settings.
//
var switches = {
'autohide' : 1,
'autoplay' : 1,
'cc_load_policy' : 0,
'controls' : 0,
'disablekb' : 1,
'enablejsapi' : 1,
'end' : 5000,
'iv_load_policy' : 0,
'modestbranding' : 1,
'origin' :
window.location.origin,
'rel': 0,
'showinfo' : 0,
'start' : 0,
'widgetid' : 1
};
var switches_str = '';
//
// Remove the ? and & elements from the url
// parameters from the iframe's src attribute ...
//
url_parameters =
url_parameters
.filter( function( value ) {
return ( ( value !== '?' ) &&
( value !== '&' ) &&
( value !== '=' ) );
} );
//
// Update the switches array element values with the
// values in the url parameters from the iframe src.
//
url_parameters
.forEach( function ( key, index, array ) {
var value;
if( ( index % 2 ) == 0 ) {
// Even: 0, 2, 4, ...
//
// Assign the value as a string or
// integer to the switches array.
//
value = array[ index + 1 ];
switches[ key ] =
( isNaN( value )
? value
: parseInt( value ) );
}
} );
iframe.setAttribute( 'allow', ALLOWS );
//
// Create a string of url parameter switches from
// the switches array.
//
Object.entries( switches )
.forEach( function ( entry, index, array ) {
const [ key, value ] = entry;
switches_str += ( ( index === 0 )
? '?'
: '&' ) +
key + '=' + value;
} );
//
// Assign the switches string to the src address
// query parameter of the iframe ...
//
iframe.src = ( url_parameters.length
? iframe.src.replace( /\?.*/,
switches_str )
: iframe.src + switches_str );
//
// YouTube Error Handler
//
function onError( event ) {
youTubePlayer
.personalPlayer.errors.push( event.data );
}
//
// YouTube Video Player state change handler ...
// used to detect that the video has played
// through to the end.
//
function onStateChange( event ) {
var $image = $( iframe ).parent().find( 'img' );
if( event.data === YT.PlayerState.ENDED ) {
youTubePlayer.pauseVideo();
youTubePlayer.seekTo( 0 );
$image.css( { 'display' : 'block',
'z-index' : 100 } )
.attr( 'src',
$( 'img.image.default' )
.attr( 'src' ) );
}
}
// Create the YouTube Player ...
youTubePlayer =
new YT.Player( 'YouTube-Player',
{
videoId : videoid,
width : iframe.clientWidth,
height : iframe.clientHeight,
name : name,
playerVars : switches,
events : {
'onError' :
onError,
'onStateChange' :
onStateChange
}
} );
loadImages( videoid );
//
// Add an error tracker, which really isn't used in
// this demo.
//
youTubePlayer.personalPlayer =
{ 'currentTimeSliding': false, 'errors': [] };
}
function getImageSize( This ) {
return This.src + '\r\n' +
'Height: ' + This.naturalHeight + ' ' +
'Width: ' + This.naturalWidth + '.';
}
function loadImages( videoid ) {
var images = document
.querySelectorAll( 'img.image' );
images.forEach( function( value, index, array ) {
const YOUTUBE_IMAGE_URL =
'https://img.youtube.com' +
'/vi/';
var className = value
.classList[ 1 ];
switch( className ) {
case 'maxresdefault' :
case 'hqdefault' :
case 'mqdefault' :
case 'sddefault' :
case 'default' :
case '0' :
case '1' :
case '2' :
case '3' :
value.src =
YOUTUBE_IMAGE_URL +
videoid +
'/' + className + '.jpg';
break;
default :
break;
}
} );
}
// Load the YouTube Embedded Video JavaScript API code
( function () {
'use strict';
function init() { // Load YouTube library
var tag = document.createElement( 'script' );
tag.src = 'https://www.youtube.com/iframe_api';
var first_script_tag =
document
.getElementsByTagName( 'script' )[ 0 ];
first_script_tag
.parentNode
.insertBefore( tag, first_script_tag );
// Set timer to display infos
}
if( window.addEventListener ) {
window.addEventListener( 'load', init );
}
else if( window. attachEvent ) {
window.attachEvent( 'onload', init );
}
} )();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div style="position: relative;">
<iframe id="YouTube-Player" width="400" height="300"
src="https://www.youtube.com/embed/yG0oBPtyNb0"
frameborder="0"></iframe>
<img style="display: none;
position: absolute;
top: 0; left: 0; z-index: -1;
width: 400px; height: 300px;
background-color: transparent;"
onclick="return imgClick( this );" />
</div>
<img class="image default" style="display: none;"
onmouseover="this.title = getImageSize( this );" />