如何使用YouTube API来支持HTML5和iOS设备？
我一直在使用http://code.google.com/apis/ajax/playground/?exp=youtube#chromeless_player上提供的演示。 我想知道的是，如果有一种方法来使播放器HTML5或与iOS设备兼容。 我似乎无法弄清楚我将如何做到这一点？ 我不认为代码是开箱即用的，因为我已经从我的iPhone上试过了，而且它似乎没有工作…我使用这个最大的原因是因为我需要能够调整音量，并得到video事件更改…
<!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>YouTube Player API Sample</title> <style type="text/css"> #videoDiv { margin-right: 3px; } #videoInfo { margin-left: 3px; } </style> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("swfobject", "2.1"); </script> <script type="text/javascript"> /* * Chromeless player has no controls. */ // Update a particular HTML element with a new value function updateHTML(elmId, value) { document.getElementById(elmId).innerHTML = value; } // This function is called when an error is thrown by the player function onPlayerError(errorCode) { alert("An error occured of type:" + errorCode); } // This function is called when the player changes state function onPlayerStateChange(newState) { updateHTML("playerState", newState); } // Display information about the current state of the player function updatePlayerInfo() { // Also check that at least one function exists since when IE unloads the // page, it will destroy the SWF before clearing the interval. if(ytplayer && ytplayer.getDuration) { updateHTML("videoDuration", ytplayer.getDuration()); updateHTML("videoCurrentTime", ytplayer.getCurrentTime()); updateHTML("bytesTotal", ytplayer.getVideoBytesTotal()); updateHTML("startBytes", ytplayer.getVideoStartBytes()); updateHTML("bytesLoaded", ytplayer.getVideoBytesLoaded()); updateHTML("volume", ytplayer.getVolume()); } } // Allow the user to set the volume from 0-100 function setVideoVolume() { var volume = parseInt(document.getElementById("volumeSetting").value); if(isNaN(volume) || volume < 0 || volume > 100) { alert("Please enter a valid volume between 0 and 100."); } else if(ytplayer){ ytplayer.setVolume(volume); } } function playVideo() { if (ytplayer) { ytplayer.playVideo(); } } function pauseVideo() { if (ytplayer) { ytplayer.pauseVideo(); } } function muteVideo() { if(ytplayer) { ytplayer.mute(); } } function unMuteVideo() { if(ytplayer) { ytplayer.unMute(); } } // This function is automatically called by the player once it loads function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById("ytPlayer"); // This causes the updatePlayerInfo function to be called every 250ms to // get fresh data from the player setInterval(updatePlayerInfo, 250); updatePlayerInfo(); ytplayer.addEventListener("onStateChange", "onPlayerStateChange"); ytplayer.addEventListener("onError", "onPlayerError"); //Load an initial video into the player ytplayer.cueVideoById("ylLzyHk54Z0"); } // The "main method" of this sample. Called when someone clicks "Run". function loadPlayer() { // Lets Flash from another domain call JavaScript var params = { allowScriptAccess: "always" }; // The element id of the Flash embed var atts = { id: "ytPlayer" }; // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) swfobject.embedSWF("http://www.youtube.com/apiplayer?" + "version=3&enablejsapi=1&playerapiid=player1", "videoDiv", "480", "295", "9", null, null, params, atts); } function _run() { loadPlayer(); } google.setOnLoadCallback(_run); </script> </head> <body style="font-family: Arial;border: 0 none;"> <table> <tr> <td><div id="videoDiv">Loading...</div></td> <td valign="top"> <div id="videoInfo"> <p>Player state: <span id="playerState">--</span></p> <p>Current Time: <span id="videoCurrentTime">--:--</span> | Duration: <span id="videoDuration">--:--</span></p> <p>Bytes Total: <span id="bytesTotal">--</span> | Start Bytes: <span id="startBytes">--</span> | Bytes Loaded: <span id="bytesLoaded">--</span></p> <p>Controls: <a href="javascript:void(0);" onclick="playVideo();">Play</a> | <a href="javascript:void(0);" onclick="pauseVideo();">Pause</a> | <a href="javascript:void(0);" onclick="muteVideo();">Mute</a> | <a href="javascript:void(0);" onclick="unMuteVideo();">Unmute</a></p> <p><input id="volumeSetting" type="text" size="3" /> <a href="javascript:void(0)" onclick="setVideoVolume();"><- Set Volume</a> | Volume: <span id="volume">--</span></p> </div> </td></tr> </table> </body> </html> 截至今天（2012年2月28日），iOS设备上的浏览器无法播放video。 您只能放置要么在iOSvideo播放器中播放video的链接，要么在YouTubevideo应用中播放。 YouTube的HTML5播放器做到这一点。 在不支持Flash的支持HTML5的设备上，它将提供HTML5标记。
3月7日是iOS的一个大发布，所以也许会改变。 但我不认为这将是一个在iOS设备上长期运行的方式。
编辑 – 以下是如何做到这一点。
要在iOS上使用此工具，请使用新的HTML5 youtube播放器。 YouTube API博客中的说明和代码： http : //apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html