Skip to content

GitLab

Commit bd466894 authored by Aral Balkan's avatar Aral Balkan
Browse files
Options

Added introductory video.

parent 1eb0f64c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 9428 additions and 0 deletions
public/css/index.css
View file @ bd466894
......@@ -268,3 +268,11 @@ h1 em, h2 em
color: #3498db;
}
figure {
width:100%;
margin-left: auto;
margin-right: auto;
border: 15px solid #3498db;
border-radius: 8px;
margin-bottom: 36px;
}
public/css/videos.css 0 → 100644
View file @ bd466894
This diff is collapsed.
public/fonts/vjs.svg 0 → 100644
View file @ bd466894
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
<glyph unicode="&#xe000;" d="M1024 960v-416l-160 160-192-192-96 96 192 192-160 160zM448 288l-192-192 160-160h-416v416l160-160 192 192z" />
<glyph unicode="&#xe001;" d="M192 832l640-384-640-384z" />
<glyph unicode="&#xe002;" d="M128 832h320v-768h-320zM576 832h320v-768h-320z" />
<glyph unicode="&#xe003;" d="M401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
<glyph unicode="&#xe004;" d="M549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
<glyph unicode="&#xe005;" d="M719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
<glyph unicode="&#xe006;" d="M890.040 37.96c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.746-18.744 49.136 0 67.882 87.638 87.642 135.904 204.16 135.904 328.1 0 123.938-48.266 240.458-135.904 328.098-18.744 18.746-18.744 49.138 0 67.882 18.744 18.744 49.138 18.744 67.882 0 105.77-105.772 164.022-246.4 164.022-395.98 0-149.582-58.252-290.208-164.022-395.98-9.372-9.374-21.656-14.060-33.94-14.060zM719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" horiz-adv-x="1088" />
<glyph unicode="&#xe007;" d="M512 960l-320-512 320-512 320 512z" />
<glyph unicode="&#xe008;" d="M0 960h1374.316v-1030.414h-1374.316v1030.414zM1245.462 449.276c-1.706 180.052-8.542 258.568-51.2 314.036-7.68 11.946-22.186 18.772-34.132 27.296-41.814 30.73-238.944 41.814-467.636 41.814-228.702 0-435.21-11.084-476.17-41.814-12.8-8.524-27.316-15.35-35.84-27.296-41.822-55.468-47.786-133.984-50.346-314.036 2.56-180.062 8.524-258.57 50.346-314.036 8.524-12.8 23.040-18.774 35.84-27.306 40.96-31.574 247.468-41.814 476.17-43.52 228.692 1.706 425.822 11.946 467.636 43.52 11.946 8.532 26.452 14.506 34.132 27.306 42.658 55.466 49.494 133.974 51.2 314.036zM662.358 495.904c-11.58 140.898-86.51 223.906-220.556 223.906-122.458 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.766 0 196.798 85.298 209.588 226.95h-138.302c-5.48-52.548-27.414-92.914-73.72-92.914-73.108 0-86.51 72.354-86.51 149.27 0 105.868 30.46 159.932 81.032 159.932 45.082 0 73.718-32.75 77.976-89.868h136.48zM1140.026 495.904c-11.57 140.898-86.51 223.906-220.546 223.906-122.466 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.758 0 196.788 85.298 209.58 226.95h-138.304c-5.47-52.548-27.404-92.914-73.71-92.914-73.116 0-86.518 72.354-86.518 149.27 0 105.868 30.468 159.932 81.030 159.932 45.084 0 73.728-32.75 77.986-89.868h136.47z" horiz-adv-x="1374" />
<glyph unicode="&#xe009;" d="M128 832h768v-768h-768z" />
<glyph unicode="&#xe00a;" d="M384 832c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM655.53 719.53c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM832 448c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM719.53 176.47c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM448.002 64c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM176.472 176.47c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM144.472 719.53c0 0 0 0 0 0 0-53.019 42.981-96 96-96 53.019 0 96 42.981 96 96 0 0 0 0 0 0 0 0 0 0 0 0 0 53.019-42.981 96-96 96-53.019 0-96-42.981-96-96s0 0 0 0zM56 448c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.765-32.235 72-72 72-39.765 0-72-32.235-72-72z" />
<glyph unicode="&#xe00b;" d="M448 384v-416l-160 160-192-192-96 96 192 192-160 160zM1024 864l-192-192 160-160h-416v416l160-160 192 192z" />
<glyph unicode="&#xe00c;" d="M512 896c282.77 0 512-186.25 512-416 0-229.752-229.23-416-512-416-27.156 0-53.81 1.734-79.824 5.044-109.978-109.978-241.25-129.7-368.176-132.596v26.916c68.536 33.578 128 94.74 128 164.636 0 9.754-0.758 19.33-2.164 28.696-115.796 76.264-189.836 192.754-189.836 323.304 0 229.75 229.23 416 512 416z" />
<glyph unicode="&#xe00d;" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 704c141.384 0 256-114.616 256-256s-114.616-256-256-256-256 114.616-256 256 114.616 256 256 256zM817.47 142.53c-81.594-81.594-190.080-126.53-305.47-126.53-115.392 0-223.876 44.936-305.47 126.53-81.594 81.594-126.53 190.078-126.53 305.47 0 115.39 44.936 223.876 126.53 305.47l67.882-67.882c0 0 0 0 0 0-131.006-131.006-131.006-344.17 0-475.176 63.462-63.462 147.838-98.412 237.588-98.412 89.748 0 174.124 34.95 237.588 98.412 131.006 131.006 131.006 344.168 0 475.176l67.882 67.882c81.594-81.594 126.53-190.080 126.53-305.47 0-115.392-44.936-223.876-126.53-305.47z" />
<glyph unicode="&#xe00e;" d="M864 256c-45.16 0-85.92-18.738-115.012-48.83l-431.004 215.502c1.314 8.252 2.016 16.706 2.016 25.328s-0.702 17.076-2.016 25.326l431.004 215.502c29.092-30.090 69.852-48.828 115.012-48.828 88.366 0 160 71.634 160 160s-71.634 160-160 160-160-71.634-160-160c0-8.622 0.704-17.076 2.016-25.326l-431.004-215.504c-29.092 30.090-69.852 48.83-115.012 48.83-88.366 0-160-71.636-160-160 0-88.368 71.634-160 160-160 45.16 0 85.92 18.738 115.012 48.828l431.004-215.502c-1.312-8.25-2.016-16.704-2.016-25.326 0-88.368 71.634-160 160-160s160 71.632 160 160c0 88.364-71.634 160-160 160z" />
<glyph unicode="&#xe01e;" d="M1024 448c-1.278 66.862-15.784 133.516-42.576 194.462-26.704 61-65.462 116.258-113.042 161.92-47.552 45.696-103.944 81.82-164.984 105.652-61.004 23.924-126.596 35.352-191.398 33.966-64.81-1.282-129.332-15.374-188.334-41.356-59.048-25.896-112.542-63.47-156.734-109.576-44.224-46.082-79.16-100.708-102.186-159.798-23.114-59.062-34.128-122.52-32.746-185.27 1.286-62.76 14.964-125.148 40.134-182.206 25.088-57.1 61.476-108.828 106.11-151.548 44.61-42.754 97.472-76.504 154.614-98.72 57.118-22.304 118.446-32.902 179.142-31.526 60.708 1.29 120.962 14.554 176.076 38.914 55.15 24.282 105.116 59.48 146.366 102.644 41.282 43.14 73.844 94.236 95.254 149.43 13.034 33.458 21.88 68.4 26.542 103.798 1.246-0.072 2.498-0.12 3.762-0.12 35.346 0 64 28.652 64 64 0 1.796-0.094 3.572-0.238 5.332h0.238zM922.306 278.052c-23.472-53.202-57.484-101.4-99.178-141.18-41.67-39.81-91-71.186-144.244-91.79-53.228-20.678-110.29-30.452-166.884-29.082-56.604 1.298-112.596 13.736-163.82 36.474-51.25 22.666-97.684 55.49-135.994 95.712-38.338 40.198-68.528 87.764-88.322 139.058-19.87 51.284-29.228 106.214-27.864 160.756 1.302 54.552 13.328 108.412 35.254 157.69 21.858 49.3 53.498 93.97 92.246 130.81 38.73 36.868 84.53 65.87 133.874 84.856 49.338 19.060 102.136 28.006 154.626 26.644 52.5-1.306 104.228-12.918 151.562-34.034 47.352-21.050 90.256-51.502 125.624-88.782 35.396-37.258 63.21-81.294 81.39-128.688 18.248-47.392 26.782-98.058 25.424-148.496h0.238c-0.144-1.76-0.238-3.536-0.238-5.332 0-33.012 24.992-60.174 57.086-63.624-6.224-34.822-16.53-68.818-30.78-100.992z" />
<glyph unicode="&#xe01f;" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96 53.020 0 96 42.98 96 96 0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96-53.020 0-96-42.98-96-96 0-282.77 229.23-512 512-512z" />
<glyph unicode="&#xe600;" d="M1024 351.906v192.188l-146.774 24.462c-5.958 18.132-13.222 35.668-21.694 52.5l86.454 121.034-135.896 135.898-120.826-86.304c-16.91 8.554-34.538 15.888-52.768 21.902l-24.402 146.414h-192.188l-24.402-146.416c-18.23-6.014-35.858-13.348-52.766-21.902l-120.828 86.304-135.898-135.898 86.454-121.036c-8.47-16.83-15.734-34.366-21.692-52.498l-146.774-24.46v-192.188l147.118-24.52c5.96-17.968 13.21-35.348 21.642-52.030l-86.748-121.448 135.898-135.896 121.654 86.894c16.602-8.35 33.89-15.528 51.764-21.434l24.578-147.472h192.188l24.578 147.474c17.874 5.906 35.162 13.084 51.766 21.432l121.652-86.892 135.896 135.896-86.744 121.446c8.432 16.682 15.678 34.062 21.64 52.032l147.118 24.518zM512 320c-70.692 0-128 57.306-128 128 0 70.692 57.308 128 128 128 70.694 0 128-57.308 128-128 0-70.694-57.306-128-128-128z" />
</font></defs></svg>
\ No newline at end of file
public/images/sprite.svg 0 → 100644
View file @ bd466894
This diff is collapsed.
public/index.html
View file @ bd466894
......@@ -4,6 +4,7 @@
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Thirty seconds for freedom. #iamindie</title>
<link rel='stylesheet' type='text/css' href='css/videos.css'>
<link rel='stylesheet' type='text/css' href='css/index.css'>
</head>
<body>
......@@ -40,6 +41,13 @@
<h2 id='share-the-love'>Share the <img src='/images/1-pixel-transparent.png' alt='love'><span aria-hidden='true'>&hearts;</span></h2>
<figure>
<video id='indie-introductory-video' class='video-js vjs-indie-skin' controls preload='auto' poster='/images/indie-poster.jpg'>
<source src='//player.vimeo.com/external/110150620.m3u8?p=high,standard&amp;s=2037f9354f1210c8c4af48d12bf037f6' type='video/mp4' />
<p class='vjs-no-js'>To view this video please consider upgrading to a web browser that supports HTML5 video, or enable JavaScript.</p>
</video>
</figure>
<p>Record <a href='https://iam.ind.ie/video/1BA2I5.MOV'>a short video</a> to tell us why you support <a href='https://ind.ie'>Indie</a> and why others should also <a href='https://ind.ie/launch'>at our launch on November 8th</a>.</p>
<p>Tell us in your own words, in your own language, in your own unique creative way…</p>
......@@ -100,5 +108,36 @@
<!-- True dat. -->
<!-- Rabbits are cute. -->
<script src='js/index.js'></script>
<script type='text/javascript' src='/js/video.dev.js'></script>
<script type='text/javascript' src='/js/video-quality-selector.js'></script>
<script type='text/javascript' src='/js/summitVideo.js'></script>
<script type='text/javascript'>
(function () {
initializeSummitPlayer({
element: '#indie-introductory-video',
sources:
[
{
type: 'application/x-mpegURL',
res: 'HD',
src: '//player.vimeo.com/external/110150620.m3u8?p=high,standard&s=2037f9354f1210c8c4af48d12bf037f6'
},
{
type: 'video/mp4',
res: 'SD',
src: '//player.vimeo.com/external/110150620.sd.mp4?s=2ebc54557292292d12af790c822b4ea9'
},
{
type: 'video/mp4',
res: 'HD',
src: '//player.vimeo.com/external/110150620.hd.mp4?s=44fc7d9ed41fcda51f428e1a3590512f'
},
]
});
}());
</script>
</body>
</html>
\ No newline at end of file
public/js/summitVideo.js 0 → 100644
View file @ bd466894
(function () {
function makeSourceElement(options) {
var source = document.createElement('source');
source.type = options.type;
source.src = options.src;
source.setAttribute('data-res', options.res);
return source;
}
function addSourceElementsToPlayer(element, sources) {
sources.forEach(function (source) {
getPlayerElement(element).appendChild(makeSourceElement(source));
});
}
function mobileFilter(source) {
return true;
}
// Firefox always falls back to flash, so this filter ensures that only the HD stream is available
// because the quality selector plugin doesn't work with flash yet
function firefoxFilter(source) {
return source.type === 'video/mp4' && source.res === 'HD';
}
function desktopFilter(source) {
return source.type === 'video/mp4';
}
function getPlayerElement(element) {
return document.querySelector(element);
}
function getFilterForPlatform() {
if(window.videojs.IS_ANDROID || window.videojs.IS_IOS) {
return mobileFilter;
} else if (window.videojs.IS_FIREFOX) {
return firefoxFilter;
} else {
return desktopFilter;
}
}
function sourcesForPlatform(sources) {
return sources.reverse().filter(getFilterForPlatform());
}
function makeSetup(poster) {
return {preload: "none", plugins: {resolutionSelector: { 'default_res': 'HD'}}};
}
function clearSourceElementsFromPlayer(videoElement) {
Array.prototype.forEach.call(getPlayerElement(videoElement) .querySelectorAll('source'), function (element) {
element.parentNode.removeChild(element);
});
}
function initializePlayer(options) {
//clear all the existing sources
clearSourceElementsFromPlayer(options.element);
//make and add video video sources
addSourceElementsToPlayer(options.element, sourcesForPlatform(options.sources));
// initialize video.js player
videojs(getPlayerElement(options.element), makeSetup(options.poster));
}
window.initializeSummitPlayer = initializePlayer;
})();
\ No newline at end of file
public/js/video-quality-selector.js 0 → 100644
View file @ bd466894
/**
* Video.js Resolution Selector
*
* This plugin for Video.js adds a resolution selector option
* to the toolbar. Usage:
*
* <video>
* <source data-res="480" src="..." />
* <source data-res="240" src="..." />
* </video>
*/
(function( _V_ ) {
/***********************************************************************************
* Define some helper functions
***********************************************************************************/
var methods = {
/**
* Utility function for merging 2 objects recursively. It treats
* arrays like plain objects and it relies on a for...in loop which will
* break if the Object prototype is messed with.
*
* @param (object) destination The object to modify and return
* @param (object) source The object to use to overwrite the first
* object
*
* @returns (object) The modified first object is returned
*/
extend : function( destination, source ) {
for ( var prop in source ) {
// Sanity check
if ( ! source.hasOwnProperty( prop ) ) { continue; }
// Enable recursive (deep) object extension
if ( typeof source[prop] == 'object' && null !== source[prop] ) {
destination[prop] = methods.extend( destination[prop] || {}, source[prop] );
} else {
destination[prop] = source[prop];
}
}
return destination;
},
/**
* In a future version, this can be made more intelligent,
* but for now, we'll just add a "p" at the end if we are passed
* numbers.
*
* @param (string) res The resolution to make a label for
*
* @returns (string) The label text string
*/
res_label : function( res ) {
return ( /^\d+$/.test( res ) ) ? res + 'p' : res;
}
};
/***********************************************************************************
* Setup our resolution menu items
***********************************************************************************/
_V_.ResolutionMenuItem = _V_.MenuItem.extend({
/** @constructor */
init : function( player, options ){
// Modify options for parent MenuItem class's init.
options.label = methods.res_label( options.res );
options.selected = ( options.res.toString() === player.getCurrentRes().toString() );
// Call the parent constructor
_V_.MenuItem.call( this, player, options );
// Store the resolution as a call property
this.resolution = options.res;
// Register our click handler
this.on( 'click', this.onClick );
// Toggle the selected class whenever the resolution changes
player.on( 'changeRes', _V_.bind( this, function() {
if ( this.resolution == player.getCurrentRes() ) {
this.selected( true );
} else {
this.selected( false );
}
}));
}
});
// Handle clicks on the menu items
_V_.ResolutionMenuItem.prototype.onClick = function() {
var player = this.player(),
video_el = player.el().firstChild,
current_time = player.currentTime(),
is_paused = player.paused(),
button_nodes = player.controlBar.resolutionSelector.el().firstChild.children,
button_node_count = button_nodes.length;
// Do nothing if we aren't changing resolutions
if ( player.getCurrentRes() == this.resolution ) { return; }
// Make sure the loadedmetadata event will fire
if ( 'none' == video_el.preload ) { video_el.preload = 'metadata'; }
// Change the source and make sure we don't start the video over
player.src( player.availableRes[this.resolution] ).one( 'loadedmetadata', function() {
player.currentTime( current_time );
if ( ! is_paused ) { player.play(); }
});
// Save the newly selected resolution in our player options property
player.currentRes = this.resolution;
// Update the button text
while ( button_node_count > 0 ) {
button_node_count--;
if ( 'vjs-current-res' == button_nodes[button_node_count].className ) {
button_nodes[button_node_count].innerHTML = methods.res_label( this.resolution );
break;
}
}
// Update the classes to reflect the currently selected resolution
player.trigger( 'changeRes' );
};
/***********************************************************************************
* Setup our resolution menu title item
***********************************************************************************/
_V_.ResolutionTitleMenuItem = _V_.MenuItem.extend({
init : function( player, options ) {
// Call the parent constructor
_V_.MenuItem.call( this, player, options );
// No click handler for the menu title
this.off( 'click' );
}
});
/***********************************************************************************
* Define our resolution selector button
***********************************************************************************/
_V_.ResolutionSelector = _V_.MenuButton.extend({
/** @constructor */
init : function( player, options ) {
// Add our list of available resolutions to the player object
player.availableRes = options.available_res;
// Call the parent constructor
_V_.MenuButton.call( this, player, options );
}
});
// Create a menu item for each available resolution
_V_.ResolutionSelector.prototype.createItems = function() {
var player = this.player(),
items = [],
current_res;
// Add the menu title item
items.push( new _V_.ResolutionTitleMenuItem( player, {
el : _V_.Component.prototype.createEl( 'li', {
className : 'vjs-menu-title vjs-res-menu-title',
innerHTML : 'Quality'
})
}));
// Add an item for each available resolution
for ( current_res in player.availableRes ) {
// Don't add an item for the length attribute
if ( 'length' == current_res ) { continue; }
items.push( new _V_.ResolutionMenuItem( player, {
res : current_res
}));
}
// Sort the available resolutions in descending order
items.sort(function( a, b ) {
if ( typeof a.resolution == 'undefined' ) {
return -1;
} else {
return parseInt( b.resolution ) - parseInt( a.resolution );
}
});
return items;
};
/***********************************************************************************
* Register the plugin with videojs, main plugin function
***********************************************************************************/
_V_.plugin( 'resolutionSelector', function( options ) {
// Only enable the plugin on HTML5 videos
if ( ! this.el().firstChild.canPlayType ) { return; }
var player = this,
sources = player.options().sources,
i = sources.length,
j,
found_type,
// Override default options with those provided
settings = methods.extend({
default_res : '', // (string) The resolution that should be selected by default ( '480' or '480,1080,240' )
force_types : false // (array) List of media types. If passed, we need to have source for each type in each resolution or that resolution will not be an option
}, options || {} ),
available_res = { length : 0 },
current_res,
resolutionSelector,
// Split default resolutions if set and valid, otherwise default to an empty array
default_resolutions = ( settings.default_res && typeof settings.default_res == 'string' ) ? settings.default_res.split( ',' ) : [];
// Get all of the available resoloutions
while ( i > 0 ) {
i--;
// Skip sources that don't have data-res attributes
if ( ! sources[i]['data-res'] ) { continue; }
current_res = sources[i]['data-res'];
if ( typeof available_res[current_res] !== 'object' ) {
available_res[current_res] = [];
available_res.length++;
}
available_res[current_res].push( sources[i] );
}
// Check for forced types
if ( settings.force_types ) {
// Loop through all available resoultions
for ( current_res in available_res ) {
// Don't count the length property as a resolution
if ( 'length' == current_res ) { continue; }
i = settings.force_types.length;
// For each resolution loop through the required types
while ( i > 0 ) {
i--;
j = available_res[current_res].length;
found_types = 0;
// For each required type loop through the available sources to check if its there
while ( j > 0 ) {
j--;
if ( settings.force_types[i] === available_res[current_res][j].type ) {
found_types++;
}
} // End loop through current resolution sources
if ( found_types < settings.force_types.length ) {
delete available_res[current_res];
available_res.length--;
break;
}
} // End loop through required types
} // End loop through resolutions
}
// Make sure we have at least 2 available resolutions before we add the button
if ( available_res.length < 2 ) { return; }
// Loop through the choosen default resolutions if there were any
for ( i = 0; i < default_resolutions.length; i++ ) {
// Set the video to start out with the first available default res
if ( available_res[default_resolutions[i]] ) {
player.src( available_res[default_resolutions[i]] );
player.currentRes = default_resolutions[i];
break;
}
}
// Helper function to get the current resolution
player.getCurrentRes = function() {
if ( typeof player.currentRes !== 'undefined' ) {
return player.currentRes;
} else {
try {
return res = player.options().sources[0]['data-res'];
} catch(e) {
return '';
}
}
};
// Get the started resolution
current_res = player.getCurrentRes();
if ( current_res ) { current_res = methods.res_label( current_res ); }
// Add the resolution selector button
resolutionSelector = new _V_.ResolutionSelector( player, {
el : _V_.Component.prototype.createEl( null, {
className : 'vjs-res-button vjs-menu-button vjs-control',
innerHTML : '<div class="vjs-control-content"><span class="vjs-current-res">' + ( current_res || 'Quality' ) + '</span></div>',
role : 'button',
'aria-live' : 'polite', // let the screen reader user know that the text of the button may change
tabIndex : 0
}),
available_res : available_res
});
// Add the button to the control bar object and the DOM
player.controlBar.resolutionSelector = player.controlBar.addChild( resolutionSelector );
});
})( videojs );
\ No newline at end of file
public/js/video.dev.js 0 → 100644
View file @ bd466894
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Like this? Fund us! Your patronage helps keep us independent and going.