Engineering and Developers Blog
What's happening with engineering and developers at YouTube
Introducing JavaScript Player API for iframe embeds
2011年1月20日星期四
Update (July 2012):
The
onYouTubePlayerAPIReady
callback has been superseded by
onYouTubeIframeAPIReady
and the URL for loading the IFrame Player API code has changed to
http(s)://www.youtube.com/iframe_api.
The API is now fully supported.
If you have been enjoying our
<iframe>
embed
announced
back in July we have some good news for you. Starting today, the
<iframe>
embed code is the default way to
share videos
on YouTube.com. We are also introducing
an initial beta version of
the
<iframe>
embed JavaScript Player API, making it a viable alternative for developers who previously used the API exposed by the ActionScript players. Let’s look at an example of the API usage:
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
//Load player api asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
This example will play a video for several seconds and then stop playback. An instance of
YT.Player
is used to control the player, defined by script loaded from
http(s)://www.youtube.com/iframe_api
. For more information about the API usage, as always, please consult our Player API
documentation
and let us know what you think on our
Developer Forum
.
Cheers,
-Jarek Wilkiewicz, on behalf of the YouTube Player Team
标签
.net
360
acceleration
access control
accessibility
actionscript
activities
activity
android
announcements
apis
app engine
appengine
apps script
as2
as3
atom
authentication
authorization
authsub
best practices
blackops
blur faces
bootcamp
captions
categories
channels
charts
chrome
chromeless
client library
clientlibraries
clientlogin
code
color
comments
compositing
create
curation
custom player
decommission
default
deprecation
devs
direct
discovery
docs
Documentation RSS
dotnet
education
embed
embedding
events
extension
feeds
flash
format
friendactivity
friends
fun
gears
google developers live
google group
googlegamedev
googleio
html5
https
iframe
insight
io12
io2011
ios
iphone
irc
issue tracker
java
javascript
json
json-c
jsonc
knight
legacy
Live Streaming API
LiveBroadcasts API
logo
machine learning
mashups
media:keywords keywords tags metadata
metadata
mobile
mozilla
NAB 2016
news
oauth
oauth2
office hours
open source
partial
partial response
partial update
partners
patch
php
player
playlists
policy
previews
pubsubhubbub
push
python
quota
rails
releases
rendering
reports
responses
resumable
ruby
samples
sandbox
shortform
ssl https certificate staging stage
stack overflow
stage video
staging
standard feeds
storify
storyful
subscription
sup
Super Chat API
survey
tdd
theme
tos
tutorials
updates
uploads
v2
v3
video
video files
video transcoding
virtual reality
voting
VR
watch history
watchlater
webvtt
youtube
youtube api
YouTube Data API
youtube developers live
youtube direct
YouTube Engineering & Developers Blog
YouTube IFrame Player API
YouTube live
YouTube Reporting API
ytd
Archive
2020
十一月
2019
八月
四月
2018
十二月
八月
四月
2017
十一月
九月
八月
三月
一月
2016
十一月
十月
八月
五月
四月
2015
十二月
十一月
十月
五月
四月
三月
一月
2014
十月
九月
八月
五月
三月
2013
十二月
十月
九月
八月
七月
六月
五月
四月
三月
二月
2012
十二月
十一月
九月
八月
七月
六月
五月
四月
三月
二月
一月
2011
十二月
十月
九月
八月
七月
六月
五月
四月
三月
二月
一月
2010
十二月
十一月
十月
九月
七月
六月
五月
四月
三月
二月
一月
2009
十一月
十月
九月
八月
七月
六月
五月
四月
三月
二月
一月
2008
十二月
十一月
十月
九月
八月
七月
六月
五月
四月
三月
二月
2007
十二月
十一月
八月
六月
五月
Feed
Follow @youtubedev