我怎样才能使用YouTube API来支持HTML5和iOS设备？设备、API、YouTube、iOS
2023-09-09 21:46:54
作者：他人万语不及你一言
我一直与在 HTTP提供的演示：//$c$c.google.com/apis/ajax/playground/ EXP =的YouTube＃chromeless_player ？如果有一种方法可以让玩家HTML5或兼容iOS设备是什么我不知道的。我似乎无法弄清楚我会怎么做呢？我不认为code开箱，因为我已经尝试过了，从我的iPhone，它似乎并没有工作......我用这最大的原因是因为我需要能够调整体积并获得视频事件变化...
＆LT;！ -
你可以自由复制和使用本示例按照该条款
Apache许可证（http://www.apache.org/licenses/LICENSE-2.0.html）
- ＆GT;
！＆LT; DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0 Strict标准// ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-当量=内容类型内容=text / html的;字符集= UTF-8/＆GT;
＆LT;冠军＆GT; YouTube播放器API采样＆LT; /标题＆GT;
＆LT;风格类型=文本/ CSS＆GT;
#videoDiv {
保证金右：的3px;
}
#videoInfo {
保证金左：的3px;
}
＆LT; /风格＆GT;
＆LT;脚本SRC =http://www.google.com/jsapi类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
google.load（SWFObject的，2.1）;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
/ *
*无铬玩家没有控制。
* /
//更新一个新值的特定HTML元素
功能updateHTML（elmId，值）{
的document.getElementById（elmId）.innerHTML =价值;
}
//错误时由游戏者投掷调用该函数
功能onPlayerError（错误code）{
警报（错误类型发生：+错误code）;
}
//当玩家改变状态调用该函数
功能onPlayerStateChange（newState）{
updateHTML（playerState，newState）;
}
//对播放器的当前状态显示信息
传播updatePlayerInfo（）{
//同时检查是否存在至少一个功能，因为当IE卸载
//页面时，它会清除间隔之前销毁SWF。
如果（ytplayer＆安培;＆安培; ytplayer.getDuration）{
updateHTML（videoDuration，ytplayer.getDuration（））;
updateHTML（videoCurrentTime，ytplayer.getCurrentTime（））;
updateHTML（bytesTotal的，ytplayer.getVideoBytesTotal（））;
updateHTML（startBytes，ytplayer.getVideoStartBytes（））;
updateHTML（的bytesLoaded，ytplayer.getVideoBytesLoaded（））;
updateHTML（卷，ytplayer.getVolume（））;
}
}
//允许用户设置从0-100的体积
功能setVideoVolume（）{
VAR体积= parseInt函数（的document.getElementById（volumeSetting）值。）;
如果（isNaN（体积）||体积℃，||体积大于100）{
警报（请输入0和100之间的有效容积）;
}
否则，如果（ytplayer）{
ytplayer.setVolume（体积）;
}
}
功能的playVideo（）{
如果（ytplayer）{
ytplayer.playVideo（）;
}
}
功能pauseVideo（）{
如果（ytplayer）{
ytplayer.pauseVideo（）;
}
}
传播muteVideo（）{
如果（ytplayer）{
ytplayer.mute（）;
}
}
传播unMuteVideo（）{
如果（ytplayer）{
ytplayer.unMute（）;
}
}
//这个功能会自动由玩家一旦加载名为
功能onYouTubePlayerReady（playerId）{
ytplayer =的document.getElementById（ytPlayer）;
//这导致updatePlayerInfo函数被调用每250毫秒到
//从玩家获得新数据
的setInterval（updatePlayerInfo，250）;
updatePlayerInfo（）;
ytplayer.addEventListener（onStateChange，onPlayerStateChange）;
ytplayer.addEventListener（onError的，onPlayerError）;
//加载初始视频到播放器
ytplayer.cueVideoById（ylLzyHk54Z0）;
}
//此示例中的主要手段。当有人点击运行之称。
功能loadPlayer（）{
//让闪光灯从另一个域调用JavaScript
VAR PARAMS = {allowScriptAccess的：永远};
//闪存嵌入的元素ID
VAR的ATT = {ID：ytPlayer};
//所有由SWFObject的处理的魔术（HTTP：//$c$c.google.com/p/swfobject/）
swfobject.embedSWF（http://www.youtube.com/apiplayer？+
版本= 3及enablejsapi = 1＆安培; playerapiid = PLAYER1，
videoDiv，480，295，9，NULL，NULL，参数，可以的ATT）;
}
功能_run（）{
loadPlayer（）;
}
google.setOnLoadCallback（_run）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;车身风格=字体家庭：宋体;边界：0无;＆GT;
＆LT;表＆gt;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT; DIV ID =videoDiv＆GT;载入中...＆LT; / DIV＆GT;＆LT; / TD＆GT;
＆LT; TD VALIGN =顶＆GT;
＆LT; DIV ID =videoInfo＆GT;
＆其中p为H.;播放器状态：其中，跨度的id =playerState＆GT; - ＆所述; /跨度＆GT;＆所述; / P＆GT;
＆LT; P＆GT;当前时间：＆lt;跨度ID =videoCurrentTime＆GT; - ： - ＆LT; / SPAN＆GT; |持续时间：其中，跨度ID =videoDuration＆GT; - ： - ＆LT; / SPAN＆GT;＆LT; / P＆GT;
＆LT; P＆GT;字节总数：LT;跨度ID =bytesTotal的＆GT; - ＆LT; / SPAN＆GT; |开始字节：其中;跨度的id =startBytes＆GT; - ＆所述; /跨度＆GT; |加载字节：其中，跨度ID =的bytesLoaded＆GT; - ＆LT; / SPAN＆GT;＆LT; / P＆GT;
＆LT; P＆GT;控制：其中; A HREF =JavaScript的：无效（0）;的onclick =的playVideo（）;＆GT;玩＆LT; / A＆GT; | ＆LT; A HREF =JavaScript的：无效（0）;的onclick =pauseVideo（）;＆GT;暂停＆所述; / a取代; | ＆LT; A HREF =JavaScript的：无效（0）;的onclick =muteVideo（）;＆GT;静音＆LT; / A＆GT; | ＆LT; A HREF =JavaScript的：无效（0）;的onclick =unMuteVideo（）;＆GT;取消静音＆所述; / a取代;＆所述; / P＆GT;
＆LT; P＆GT;＆LT;输入ID =volumeSetting类型=文字大小=3/＆GT;＆安培; NBSP;＆LT; A HREF =JavaScript的：无效（0）的onclick =setVideoVolume（）; ＆GT;＆放大器; LT; - 设置音量＆LT; / A＆GT; |体积：＆LT;跨度ID =卷＆GT; - ＆LT; / SPAN＆GT;＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
截至今天（2012年2月28日），有没有办法在iOS设备在浏览器中播放在线视频。您只能proide链接，要么播放视频的iOS的视频播放器，或在YouTube应用。 YouTube的HTML5播放器来实现的。在启用HTML5不支持Flash的设备，它将成为一个HTML5标签。
3月7日是一些大的发布为iOS，所以也许这将改变即可。但我不希望它会因为这是在iOS设备上运行的长期方法。
编辑 - 这里是如何做到这一点。
为使这项工作为iOS，使用新的HTML5 YouTube播放器。说明和code发现这里在YouTube的API博客： http://apiblog.youtube.com/2010 /07/new-way-to-embed-youtube-videos.html
I have been working with the demo provided at http://code.google.com/apis/ajax/playground/?exp=youtube#chromeless_player. What I am wondering is if there is a way to make the player HTML5 or compatible with ios devices. I can't seem to figure out how I would do that? I don't think the code works out of the box as I have tried it from my iphone and it doesn't seem to work... The biggest reason I am using this is because I need to be able to adjust volume and get the video event changes...
<!--
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>
解决方案
As of today (2-28-2012) there is no way to play video in-line within a browser on iOS devices. You can only proide links that will either play the video in the iOS video player, or in the youtube app. The Youtube HTML5 player does this. On HTML5 enabled devices that do not support flash, it will serve an HTML5 tag.
March 7 is some big announcement for iOS, so maybe this will change then. But I do not expect it will as this is a long-standing way of operating on iOS devices.
EDIT - Here's how to do it.
To make this work for iOS, use the new HTML5 youtube player. Instructions and code found here in the YouTube API Blog: http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html
相关推荐
猜您喜欢
精彩图集
