Fatal编程技术网
  • javascript/
  • Javascript 如何使用YouTube API支持HTML5和iOS设备？

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

javascript ios actionscript-3 flash youtube

Javascript 如何使用YouTube API支持HTML5和iOS设备？,javascript,ios,actionscript-3,flash,youtube,Javascript,Ios,Actionscript 3,Flash,Youtube,我一直在使用上提供的演示。我想知道的是，是否有办法使播放器与HTML5或ios设备兼容。我似乎不知道该怎么做？我不认为这个代码是现成的，因为我已经在iphone上试过了，它似乎不起作用。。。我使用它的最大原因是因为我需要能够调整音量并获得视频事件的更改 <!-- You are free to copy and use this sample in accordance with the terms of the Apache license (http://www.apache.org/

我一直在使用上提供的演示。我想知道的是，是否有办法使播放器与HTML5或ios设备兼容。我似乎不知道该怎么做？我不认为这个代码是现成的，因为我已经在iphone上试过了，它似乎不起作用。。。我使用它的最大原因是因为我需要能够调整音量并获得视频事件的更改

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


YouTube播放器API示例
#videoDiv{
右边距：3倍；
}
#视频信息{
左边距：3倍；
}
加载（“swfobject”，“2.1”）；
/*
*无铬播放器没有控制。
*/
//使用新值更新特定HTML元素
函数updateHTML（elmId，value）{
document.getElementById（elmId）.innerHTML=value；
}
//当播放机抛出错误时调用此函数
函数onplayerror（错误代码）{
警报（“发生类型为：+errorCode的错误”）；
}
//当播放器改变状态时调用此函数
函数onPlayerStateChange（newState）{
updateHTML（“playerState”，newState）；
}
//显示有关播放机当前状态的信息
函数updatePlayerInfo（）{
//还要检查IE卸载后是否至少存在一个函数
//第页，它将在清除间隔之前销毁SWF。
if（ytplayer&&ytplayer.getDuration）{
updateHTML（“videoDuration”，ytplayer.getDuration（））；
updateHTML（“videoCurrentTime”，ytplayer.getCurrentTime（））；
updateHTML（“bytesTotal”，ytplayer.getVideoBytesTotal（））；
updateHTML（“startBytes”，ytplayer.getVideoStartBytes（））；
updateHTML（“bytesload”，ytplayer.getvideobytesload（））；
updateHTML（“volume”，ytplayer.getVolume（））；
}
}
//允许用户将音量设置为0-100
函数setVideoVolume（）{
var volume=parseInt（document.getElementById（“volumeSetting”）.value）；
如果（isNaN（体积）| |体积<0 | |体积>100）{
警报（“请输入介于0和100之间的有效卷”）；
}
else if（玩家）{
ytplayer.setVolume（音量）；
}
}
函数playVideo（）{
如果（玩家）{
ytplayer.playVideo（）；
}
}
函数pauseVideo（）{
如果（玩家）{
ytplayer.pauseVideo（）；
}
}
函数muteVideo（）{
如果（玩家）{
ytplayer.mute（）；
}
}
函数unMuteVideo（）{
如果（玩家）{
ytplayer.unMute（）；
}
}
//此函数在加载后由播放机自动调用
函数onYouTubePlayerReady（playerId）{
ytplayer=document.getElementById（“ytplayer”）；
//这会导致每250ms调用一次updatePlayerInfo函数
//从玩家那里获取新数据
setInterval（updatePlayerInfo，250）；
updatePlayerInfo（）；
ytplayer.addEventListener（“onStateChange”、“onPlayerStateChange”）；
ytplayer.addEventListener（“onError”、“onplayerror”）；
//将初始视频加载到播放器中
ytplayer.cueVideoById（“ylLzyHk54Z0”）；
}
//本样本的“主要方法”。当有人单击“运行”时调用。
函数loadPlayer（）{
//允许从另一个域调用JavaScript刷新
var params={allowScriptAccess:“始终”}；
//闪存的元素id
var atts={id:“ytPlayer”}；
//SWFObject处理的所有魔法(http://code.google.com/p/swfobject/)
swfobject.embeddeswf（“http://www.youtube.com/apiplayer?" +
“version=3&enablejsapi=1&playerapiid=player1”，
“videoDiv”、“480”、“295”、“9”、空、空、参数、atts）；
}
函数_run（）{
loadPlayer（）；
}
setOnLoadCallback（_run）；
加载。。。
玩家状态：--

当前时间：-：-----------持续时间：-：--

字节总数：——|开始字节：——|加载的字节数：--

控件：| | |

|体积：--

​
从今天（2012年2月28日）起，在iOS设备上的浏览器中无法在线播放视频。您只能提供将在iOS视频播放器或youtube应用程序中播放视频的链接。Youtube HTML5播放器就是这样做的。在不支持flash的支持HTML5的设备上，它将提供HTML5标签

3月7日是iOS的一个重大宣布，所以也许届时情况会有所改变。但我不认为会这样，因为这是一种在iOS设备上长期存在的操作方式

编辑-下面是如何做到这一点

要在iOS上实现这一点，请使用新的HTML5 youtube播放器。YouTube API博客中的说明和代码：

那么，有没有办法让上述代码利用iOS应用程序呢？现在什么都没出现。。。这个应用程序总比什么都没有好…我有一个JavaScript api可以让这样的玩家在ios上工作吗？例如，要在嵌入式播放器中播放、暂停或跳过视频？在IOS上单击youtube图标，它会在youtube应用程序中启动视频。这不是一个出色的实现，但你可以通过谷歌和苹果来实现。不过，不要单击“播放”按钮，因为这样会使其中断。问苹果为什么他们的浏览器不能播放在线视频。。。