如何使用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>

來源

2012-02-28 dingerkingh

-1

從今天（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

來源

2012-02-29 01:21:27

任何想法如何使上述代碼利用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設備？

回答

相關問題