如何使用YouTube API来支持HTML5和iOS设备？

问题描述：

我一直在http://code.google.com/apis/ajax/playground/?exp=youtube#chromeless_player提供的演示。我想知道的是，如果有一种方法可以让播放器HTML5或与iOS设备兼容。我似乎无法弄清楚我将如何做到这一点？我认为这些代码并不像我用iPhone试过的那样开箱即用，并且它看起来不起作用......我使用这个的最大原因是因为我需要能够调整音量并获得视频事件发生变化...如何使用YouTube API来支持HTML5和iOS设备？

<!-- 
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" />&nbsp;<a href="javascript:void(0)" onclick="setVideoVolume();">&lt;- Set Volume</a> | Volume: <span id="volume">--</span></p> 
     </div> 
    </td></tr> 
    </table> 
    </body> 
</html>

答

从今天（2-28-2012）起，iOS设备上的浏览器无法播放视频。您只能对可以在iOS视频播放器中播放视频或在YouTube视频应用中播放的链接进行推测。 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

任何想法如何使上述代码利用iOS应用程序呢？现在只是什么都没有显示出来...应用程序总比没有好... – dingerkingh 2012-02-29 14:28:05

我有一个像这样的工作在iOS上的球员的JavaScript API？比如播放，暂停，跳过嵌入播放器中播放的视频？ – wilsonpage 2012-04-09 17:30:23

在IOS上点击youtube图标，它会在youtube应用程序中启动视频。它不是一个很好的实现，但你可以把它与谷歌和苹果。不要点击播放按钮，因为这会打破它。问苹果为什么他们的浏览器无法播放内嵌视频... – 2012-04-09 19:04:17

如何使用YouTube API来支持HTML5和iOS设备？

相关推荐