Question

为什么下面的代码不能触发我脚本中的播放功能？不要理解为什么不能，使用jsfiddle并且在那里工作得很好.. 我决定在这里输入我的整个index.php只是因为如果有什么令人不安的事情让我无法工作，我就看不到了。有任何人遇到同样的问题并设法解决它？请让我知道如何！

＆＃13;

<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>Dungeon Runner</title>
<script>
//youtube script
//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
        }
    });
}

onPlayerStateChange = function (event) {
    if (event.data == YT.PlayerState.ENDED) {
        $('.start-video').fadeIn('normal');
    }
}

$(document).on('click', '.start-video', function () {
    $(this).fadeOut('normal');
    player.playVideo();
});
</script>
</head>
<body>

	<div class="topbar">
	
		<div class="topbar_content">
			<div class="topbar_left">
				<a href="http://playdungeonrunner.com"><img src="css/img/logo.png"></a>
			</div>
			<div class="topbar_right">
			
				<a href="http://playdungeonrunner.com" class="menu">Home</a>&nbsp;&nbsp;
				<a href="#" class="menu">About</a>&nbsp;&nbsp;
				<a href="http://forum.playdungeonrunner.com" class="menu">Forum</a>&nbsp;&nbsp;
				<a href="https://store.steampowered.com/app/438330" class="menu">Steam Store</a>
			
			</div>
		</div>
	
	</div>
	
	
	
	<div class="container">
	
		<!--<iframe class="trailer" width="630" height="350" src="https://www.youtube.com/embed/4UHfocC1i54?autoplay=0&controls=0&showinfo=0&volume=0?enablejsapi=1" frameborder="0" allowfullscreen></iframe>-->
	<div id="player"></div>
	<button class="start-video">Start Video</button>
		
		<div class="container_text">
			<p>Dungeon Runner is a 2D platformer with a high quality modern-retro design. The game is based on surviving several levels and passing them. Levels are set into chapters. 
			Each chapter provides more difficult levels.</p>
			<p>You're playing as Bjorg, a cave discoverer who's fallen into a adventure that nobody can imagine. You will be facing off monsters, puzzles and obstacles that you will need to pass in order to make 
			it to the next dungeon. Once you've passed all the levels, you can finally get out of this hell-hole that once was believed to be the greatest challenge for a cave enthusiast.</p>
			<br /><br />
			
			<div class="twitter_left">
				<a href="http://twitter.com/dungeonrungame" class="twitter"><h2><img src="css/img/twitter.png"> Twitter / @dungeonrungame</h2></a>
				<p><i>Follow the game's twitter for the latest updates and a easy way to get in contact with the dev(s)!</i></p>
			</div>
			<div class="twitter_right">
				<a href="http://twitter.com/hyprCSGO" class="twitter"><h2><img src="css/img/twitter.png"> Twitter / @hyprCSGO</h2></a>
				<p><i>Check out my own twitter account for exclusive sneak-peeks of future updates and how the game development is going!</i></p>
			</div>
		
		</div>
		
		<div class="container_right">
			<img src="css/img/enemies.png">
		</div>
		
	</div>
	
	<div class="footr">
		<div class="footr_content">
			<div style="float: left;">Copyright &copy; 2016 Jonathan Öhrström &bull; The game is available for PC/Mac/Linux. Steam required.</div>
			<div style="float: right;"><a href="mailto:press@playdungeonrunner.com" class="footer">Press</a>
			 &nbsp;&bull;&nbsp; 
			<a href="mailto:support@playdungeonrunner.com" class="footer">Contact</a>
			 &nbsp;&bull;&nbsp; 
			<a href="http://steamcommunity.com/groups/dungeonrunnergame" class="footer" target="_blank">Steam Group</a></div>
		</div>
	</div>

</body>
</html>

＆＃13;

Answer 1

在调用之前添加jquery

$(document).on('click', '.start-video', function () {
...

例如：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
//youtube script
//youtube script
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
...

Answer 2

将JQuery添加到您的文档中，它应该解决它......

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">    </script>

<link rel="stylesheet" href="css/style.css">
<title>Dungeon Runner</title>
...
</head>

默认情况下，JSFiddle会将此添加到它们的小提琴中，除非您明确告诉它不要。

为什么我的播放按钮不起作用？

2 个答案: