javascript - 为什么我的播放按钮不起作用？-6ren

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

转载作者：行者123 更新时间：2023-12-02 14:59:41

为什么下面的代码没有触发我的脚本中的播放功能？不明白为什么不使用 jsfiddle在那里工作得很好..我决定将整个index.php 放在这里只是因为如果有什么东西干扰了它的工作而我看不到。有人遇到过同样的问题并设法解决它吗？请让我知道如何!

<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>

最佳答案

将 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 默认情况下会将其添加到他们的 fiddle 中，除非您明确告诉它不要这样做。

关于javascript - 为什么我的播放按钮不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35525526/

文章推荐： javascript - WebGL:glDrawElements 超出顶点边界

文章推荐： javascript - 如何使用javascript获取

首页

博学

6Ren·AI

商城

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