Iframe youtube API - quan1997ap/angular-app-note GitHub Wiki
Note: Youtube chỉ cho phép hiển thị video qua ifram và chặn không cho phép auto start
Link : http://jsfiddle.net/8R5y6/
HTML
<a href="javascript:void callPlayer("whateverID","playVideo")">Start</a> • <a href="javascript:void callPlayer("whateverID","pauseVideo")">Pause</a> • <a href="javascript:void callPlayer("whateverID","stopVideo")">Stop</a> - Hover over the links to see the called function
<br />
<div id="whateverID"><iframe width="640" height="390" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe></div>
JS
/*
* @author Rob W (http://stackoverflow.com/a/7513356/938089
* @description Executes function on a framed YouTube video (see previous link)
* For a full list of possible functions, see:
* http://code.google.com/apis/youtube/js_api_reference.html
* @param String frame_id The id of (the div containing) the frame
* @param String func Desired function to call, eg. "playVideo"
* @param Array args (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args) {
if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
var iframe = document.getElementById(frame_id);
if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
iframe = iframe.getElementsByTagName('iframe')[0];
}
if (iframe) {
// Frame exists,
iframe.contentWindow.postMessage(JSON.stringify({
"event": "command",
"func": func,
"args": args || [],
"id": frame_id
}), "*");
}
}
Link : https://codepen.io/zavan/pen/PoGQWmG
HTML
<p>Click Play and watch the time update:</p>
<p>Time: <span id="time">0</span> seconds</p>
<div id="player"></div>
JS
// Load the IFrame Player API code 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);
// Instantiate the Player.
function onYouTubeIframeAPIReady() {
var player = new YT.Player("player", {
height: "390",
width: "640",
videoId: "M7lc1UVf-VE"
});
// This is the source "window" that will emit the events.
var iframeWindow = player.getIframe().contentWindow;
// So we can compare against new updates.
var lastTimeUpdate = 0;
// Listen to events triggered by postMessage,
// this is how different windows in a browser
// (such as a popup or iFrame) can communicate.
// See: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
window.addEventListener("message", function(event) {
// Check that the event was sent from the YouTube IFrame.
if (event.source === iframeWindow) {
var data = JSON.parse(event.data);
// The "infoDelivery" event is used by YT to transmit any
// kind of information change in the player,
// such as the current time or a playback quality change.
if (
data.event === "infoDelivery" &&
data.info &&
data.info.currentTime
) {
// currentTime is emitted very frequently (milliseconds),
// but we only care about whole second changes.
var time = Math.floor(data.info.currentTime);
if (time !== lastTimeUpdate) {
lastTimeUpdate = time;
// It's now up to you to format the time.
document.getElementById("time").innerHTML = time;
}
}
}
});
}