ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More work on YouTube playback

Browse Source
This commit is contained in:
Sam Potts 2015-07-12 21:17:56 +10:00
parent 9d966e41b1
commit 093af22942
6 changed files with 231 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/docs.css vendored
View File

File diff suppressed because one or more lines are too long

68
docs/index.youtube.html Normal file
View File

@ -0,0 +1,68 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Plyr - A simple HTML5 media player</title>
<meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
<meta name="author" content="Sam Potts">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="../dist/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="dist/docs.css">
</head>
<body>
<header>
<h1>Plyr</h1>
<p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
<ul class="actions">
<li>
<a href="https://github.com/selz/plyr" target="_blank" class="btn btn-download">Download on GitHub</a>
<span class="btn-count js-stargazers-count">&hellip;</span>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter js-popup" data-window-height="250" data-window-width="500">Tweet</a>
<span class="btn-count js-tweet-count">&hellip;</span>
</li>
</ul>
</header>
<main>
<section class="example-video">
<div class="player">
<div data-video-id="L1h9xxCU20g" data-type="youtube"></div>
</div>
</section>
</main>
<!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script>
(function(d, u){
var a = new XMLHttpRequest(),
b = d.body;
// If proper CORS supported
if("withCredentials" in a) {
a.open("GET", u, true);
a.send();
a.onload = function(){
var c = d.createElement("div");
c.style.display="none";
c.innerHTML = a.responseText;
b.insertBefore(c, b.childNodes[0]);
}
}
})(document, "../dist/sprite.svg");
</script>
<!-- Plyr core script -->
<script src="../src/js/plyr.js"></script>
<!--<script src="../dist/plyr.js"></script>-->
<!-- Docs script -->
<script src="dist/docs.js"></script>
</body>
</html>

12
docs/src/less/docs.less
View File

@ -33,12 +33,16 @@
} }
// Base // Base
html {
font-size: 100%;
}
body { body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: @off-white; background: @off-white;
line-height: 1.5; line-height: 1.5;
text-align: center; text-align: center;
color: @gray; color: @gray;
.font-smoothing(on);
} }
// Error page // Error page
@ -142,7 +146,6 @@ a {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
border-radius: 3px; border-radius: 3px;
.font-smoothing(on);
font-weight: 600; font-weight: 600;
user-select: none; user-select: none;
} }
@ -214,16 +217,19 @@ a {
.example-video .player { .example-video .player {
max-width: 1200px; max-width: 1200px;
video { video,
iframe {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
iframe {
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
&-fullscreen, &-fullscreen,
&.fullscreen-active { &.fullscreen-active {
max-width: none; max-width: none;
} }
} }
// Footer // Footer
footer { footer {
margin-bottom: @padding-base; margin-bottom: @padding-base;

3
docs/src/less/lib/mixins.less
View File

@ -17,7 +17,6 @@
// Default // Default
outline: thin dotted @gray-dark; outline: thin dotted @gray-dark;
// Webkit // Webkit
//outline: 5px auto -webkit-focus-ring-color;
outline-offset: 1px; outline-offset: 1px;
} }
@ -25,7 +24,7 @@
// Leave <body> at 100%/16px // Leave <body> at 100%/16px
// --------------------------------------- // ---------------------------------------
.font-size(@font-size: 16){ .font-size(@font-size: 16){
@rem: round((@font-size / 16), 1); @rem: round((@font-size / 16), 3);
font-size: (@font-size * 1px); font-size: (@font-size * 1px);
font-size: ~"@{rem}rem"; font-size: ~"@{rem}rem";
} }

195
src/js/plyr.js
View File

@ -49,10 +49,9 @@
duration: ".player-duration" duration: ".player-duration"
}, },
classes: { classes: {
video: "player-video",
videoWrapper: "player-video-wrapper", videoWrapper: "player-video-wrapper",
embedWrapper: "player-video-embed", embedWrapper: "player-video-embed",
audio: "player-audio", type: "player-{0}",
stopped: "stopped", stopped: "stopped",
playing: "playing", playing: "playing",
muted: "muted", muted: "muted",
@ -83,10 +82,7 @@
key: "plyr_volume" key: "plyr_volume"
}, },
controls: ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"], controls: ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"],
onSetup: function() {}, onSetup: function() {}
youtube: {
regex: /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
}
}; };
// Build the default HTML // Build the default HTML
@ -833,7 +829,7 @@
player.media.removeAttribute("controls"); player.media.removeAttribute("controls");
// Add type class // Add type class
_toggleClass(player.container, config.classes[player.type], true); _toggleClass(player.container, config.classes.type.replace("{0}", player.type), true);
// If there's no autoplay attribute, assume the video is stopped and add state class // If there's no autoplay attribute, assume the video is stopped and add state class
_toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null)); _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
@ -854,14 +850,11 @@
// Cache the container // Cache the container
player.videoContainer = wrapper; player.videoContainer = wrapper;
}
// YouTube // YouTube
var firstSource = player.media.querySelectorAll("source")[0], if(player.type == "youtube") {
matches = firstSource.src.match(config.youtube.regex); _setupYouTube(player.media.getAttribute("data-video-id"));
if(firstSource.type == "video/youtube" && matches && matches[2].length == 11) {
_setupYouTube(matches[2]);
}
} }
} }
@ -873,21 +866,17 @@
// Setup YouTube // Setup YouTube
function _setupYouTube(id) { function _setupYouTube(id) {
player.embed = true;
// Hide the <video> element
player.media.style.display = "none";
// Create the YouTube iframe // Create the YouTube iframe
var iframe = document.createElement("iframe"); var iframe = document.createElement("iframe");
iframe.src = "https://www.youtube.com/embed/"+ id + "?rel=0&vq=hd720&iv_load_policy=3&controls=0&autoplay=0&showinfo=0&wmode=transparent&?enablejsapi=1"; iframe.src = "https://www.youtube.com/embed/"+ id + "?rel=0&vq=hd720&iv_load_policy=3&controls=0&autoplay=0&showinfo=0&wmode=transparent&enablejsapi=1";
iframe.id = "youtube" + Math.floor(Math.random() * (10000)); iframe.id = "youtube" + Math.floor(Math.random() * (10000));
// Add embed class for responsive // Add embed class for responsive
_toggleClass(player.videoContainer, config.classes.embedWrapper, true); _toggleClass(player.media, config.classes.videoWrapper, true);
_toggleClass(player.media, config.classes.embedWrapper, true);
// Append the iframe // Append the iframe
player.videoContainer.appendChild(iframe); player.media.appendChild(iframe);
// Add the API // Add the API
_injectScript("https://www.youtube.com/iframe_api"); _injectScript("https://www.youtube.com/iframe_api");
@ -895,21 +884,99 @@
// Setup callback for the API // Setup callback for the API
window.onYouTubeIframeAPIReady = function() { window.onYouTubeIframeAPIReady = function() {
_log("YouTube API Ready"); _log("YouTube API Ready");
_log(iframe.id);
_log(id);
player.youtube = new YT.Player(iframe.id, { // Setup timers object
// We have to poll YouTube for updates
player.timer = {};
// Setup instance
player.embed = new YT.Player(iframe.id, {
videoId: id,
iv_load_policy: 3,
events: { events: {
onReady: function() { onReady: function(event) {
console.log("ready"); // Get the instance
var instance = event.target;
// Create a faux HTML5 API using the YouTube API
player.media.play = function() { instance.playVideo(); };
player.media.pause = function() { instance.pauseVideo(); };
player.media.stop = function() { instance.stopVideo(); };
player.media.duration = instance.getDuration();
player.media.paused = (instance.getPlayerState() == 2);
player.media.currentTime = instance.getCurrentTime();
player.media.muted = instance.isMuted();
// Setup buffering
player.timer.buffering = window.setInterval(function() {
// Get loaded % from YouTube
player.media.buffered = instance.getVideoLoadedFraction();
// Trigger timeupdate
_triggerEvent(player.media, "progress");
// Bail if we're at 100%
if(player.media.buffered === 1) {
window.clearInterval(player.timer.buffering);
}
}, 100);
_setupInterface();
}, },
onStateChange: function(e) { onStateChange: function(event) {
console.log(e); // Get the instance
var instance = event.target;
// Reset timer
window.clearInterval(player.timer.playing);
// Handle event
switch(event.data) {
// Unstarted
case -1:
break;
// Ended
case 0:
player.media.paused = true;
_triggerEvent(player.media, "ended");
break;
// Playing
case 1:
player.media.paused = false;
_triggerEvent(player.media, "play");
// Poll to get playback progress
player.timer.playing = window.setInterval(function() {
// Set the current time
player.media.currentTime = instance.getCurrentTime();
// Trigger timeupdate
_triggerEvent(player.media, "timeupdate");
}, 200);
break;
// Paused
case 2:
player.media.paused = true;
_triggerEvent(player.media, "pause");
break;
// Buffering
case 3:
break;
// Video cued
case 5:
break;
}
} }
} }
}); });
_log(player.youtube); _log(player.embed);
} }
} }
@ -1063,7 +1130,7 @@
// Setup fullscreen // Setup fullscreen
function _setupFullscreen() { function _setupFullscreen() {
if(player.type === "video" && config.fullscreen.enabled) { if(player.type != "audio" && config.fullscreen.enabled) {
// Check for native support // Check for native support
var nativeSupport = fullscreen.supportsFullScreen; var nativeSupport = fullscreen.supportsFullScreen;
@ -1159,6 +1226,14 @@
} }
catch(e) {} catch(e) {}
// YouTube
if(player.type == "youtube") {
player.embed.seekTo(player.media.currentTime);
// Trigger timeupdate
_triggerEvent(player.media, "timeupdate");
}
// Logging // Logging
_log("Seeking to " + player.media.currentTime + " seconds"); _log("Seeking to " + player.media.currentTime + " seconds");
@ -1281,6 +1356,14 @@
// Set the player volume // Set the player volume
player.media.volume = parseFloat(volume / 10); player.media.volume = parseFloat(volume / 10);
// YouTube
if(player.type == "youtube") {
player.embed.setVolume(player.media.volume * 100);
// Trigger timeupdate
_triggerEvent(player.media, "volumechange");
}
// Toggle muted state // Toggle muted state
if(player.media.muted && volume > 0) { if(player.media.muted && volume > 0) {
_toggleMute(); _toggleMute();
@ -1296,6 +1379,14 @@
// Set mute on the player // Set mute on the player
player.media.muted = muted; player.media.muted = muted;
// YouTube
if(player.type === "youtube") {
player.embed[player.media.muted ? "mute" : "unMute"]();
// Trigger timeupdate
_triggerEvent(player.media, "volumechange");
}
} }
// Update volume UI and storage // Update volume UI and storage
@ -1386,9 +1477,14 @@
value = (function() { value = (function() {
var buffered = player.media.buffered; var buffered = player.media.buffered;
if(buffered.length) { // HTML5
if(buffered && buffered.length) {
return _getPercentage(buffered.end(0), player.media.duration); return _getPercentage(buffered.end(0), player.media.duration);
} }
// YouTube returns between 0 and 1
else if(typeof buffered == "number") {
return (buffered * 100);
}
return 0; return 0;
})(); })();
@ -1603,10 +1699,7 @@
}); });
// Check for buffer progress // Check for buffer progress
_on(player.media, "progress", _updateProgress); _on(player.media, "progress playing", _updateProgress);
// Also check on start of playing
_on(player.media, "playing", _updateProgress);
// Handle native mute // Handle native mute
_on(player.media, "volumechange", _updateVolume); _on(player.media, "volumechange", _updateVolume);
@ -1688,10 +1781,19 @@
player.browser = _browserSniff(); player.browser = _browserSniff();
// Get the media element // Get the media element
player.media = player.container.querySelectorAll("audio, video")[0]; player.media = player.container.querySelectorAll("audio, video, div")[0];
// Set media type // Set media type
player.type = player.media.tagName.toLowerCase(); var tagName = player.media.tagName.toLowerCase();
switch(tagName) {
case "div":
player.type = player.media.getAttribute("data-type");
break;
default:
player.type = tagName;
break;
}
// Check for full support // Check for full support
player.supported = api.supported(player.type); player.supported = api.supported(player.type);
@ -1707,6 +1809,16 @@
// Setup media // Setup media
_setupMedia(); _setupMedia();
// Setup interface
if(player.type == "video" || player.type == "audio") {
_setupInterface();
}
// Successful setup
player.init = true;
}
function _setupInterface() {
// If there's full support // If there's full support
if(player.supported.full) { if(player.supported.full) {
// Inject custom controls // Inject custom controls
@ -1726,9 +1838,7 @@
_setupAria(); _setupAria();
// Captions // Captions
if(!player.embed) { _setupCaptions();
_setupCaptions();
}
// Set volume // Set volume
_setVolume(); _setVolume();
@ -1740,9 +1850,6 @@
// Listeners // Listeners
_listeners(); _listeners();
} }
// Successful setup
player.init = true;
} }
// Initialize instance // Initialize instance