├── .gitignore ├── src ├── img │ ├── bgr.png │ ├── buffer.png │ ├── pg-bgd.png │ ├── controls.png │ ├── noise-bgd.jpg │ ├── noise-bgd.png │ ├── progress.png │ ├── playlist-item-bgd.png │ ├── progress_sprite.jpg │ ├── white-noise-logo-lg.jpg │ ├── white-noise-logoX2.jpg │ └── playlist-item-current-bgd.png ├── less │ ├── app.less │ ├── normalize.less │ ├── circle-player.less │ └── custom-player.less ├── scripts │ └── Jplayer.swf └── js │ ├── app │ ├── playlist │ │ ├── playlist.xml │ │ └── playlist.js │ └── app.js │ ├── libs │ ├── jquery.grab.js │ ├── circle.player.js │ ├── jquery.transform.js │ ├── jplayer.playlist.modified.js │ └── jquery.jplayer.js │ └── shims │ └── modernizr.custom.js ├── gruntfile.js ├── .jshintrc ├── grunt-tasks ├── aliases.js ├── config.js ├── misc.js ├── styles.js ├── dev.js └── scripts.js ├── package.json ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | mp3/ 3 | dist/ 4 | -------------------------------------------------------------------------------- /src/img/bgr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/bgr.png -------------------------------------------------------------------------------- /src/img/buffer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/buffer.png -------------------------------------------------------------------------------- /src/img/pg-bgd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/pg-bgd.png -------------------------------------------------------------------------------- /src/img/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/controls.png -------------------------------------------------------------------------------- /src/img/noise-bgd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/noise-bgd.jpg -------------------------------------------------------------------------------- /src/img/noise-bgd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/noise-bgd.png -------------------------------------------------------------------------------- /src/img/progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/progress.png -------------------------------------------------------------------------------- /src/less/app.less: -------------------------------------------------------------------------------- 1 | @import 'normalize.less'; 2 | @import 'circle-player.less'; 3 | @import 'custom-player.less'; -------------------------------------------------------------------------------- /src/scripts/Jplayer.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/scripts/Jplayer.swf -------------------------------------------------------------------------------- /src/img/playlist-item-bgd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/playlist-item-bgd.png -------------------------------------------------------------------------------- /src/img/progress_sprite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/progress_sprite.jpg -------------------------------------------------------------------------------- /src/img/white-noise-logo-lg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/white-noise-logo-lg.jpg -------------------------------------------------------------------------------- /src/img/white-noise-logoX2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/white-noise-logoX2.jpg -------------------------------------------------------------------------------- /src/img/playlist-item-current-bgd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/derick-montague/responsive-jPlayer/HEAD/src/img/playlist-item-current-bgd.png -------------------------------------------------------------------------------- /gruntfile.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var gruntTasks = require('grunt-tasks'); 4 | 5 | module.exports = function(grunt) { 6 | 7 | gruntTasks(grunt, { 8 | tasks: 'grunt-tasks/*.js', 9 | config: 'grunt-tasks/config.js', 10 | aliases: 'grunt-tasks/aliases.js' 11 | }); 12 | }; -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "noarg": true, 7 | "sub": true, 8 | "boss": true, 9 | "eqnull": true, 10 | "expr": true, 11 | "node": true, 12 | "laxcomma": true, 13 | "globals" : { 14 | "jQuery": true, 15 | "Modernizr": true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /grunt-tasks/aliases.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | 5 | // Register Build Tasks 6 | 'js' :['jshint','concat:js', 'uglify'], 7 | 'css' :['less', 'concat:css', 'cssmin'], 8 | 'build' :['clean', 'css', 'js','copy'], 9 | 10 | // Register Dev Tasks 11 | 'base' :['clean:js', 'clean:css', 'css', 'js', 'copy:dev'], 12 | 'default' :['base', 'watch'] 13 | }; -------------------------------------------------------------------------------- /src/js/app/playlist/playlist.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Bottom Feeders 4 | Snorkel 5 | mp3/Bottom Feederz.mp3 6 | false 7 | 2:49 8 | 9 | 10 | Pizza 11 | Snorkel 12 | /mp3/Pizza.mp3 13 | false 14 | 5:38 15 | 16 | -------------------------------------------------------------------------------- /src/less/normalize.less: -------------------------------------------------------------------------------- 1 | /***\\\*** Normalize ***\\\***/ 2 | body, form { 3 | margin: 0; 4 | padding: 0; 5 | } 6 | /* HTML5 display-role reset for older browsers */ 7 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 8 | display: block; 9 | } 10 | table { 11 | border-collapse: collapse; 12 | border-spacing: 0; 13 | } 14 | img, video, object { 15 | max-width: 100%; 16 | height: auto; 17 | border: 0; 18 | } -------------------------------------------------------------------------------- /grunt-tasks/config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | pkg: '', 5 | folders: { 6 | src : ['src'], 7 | libs : ['<%= folders.src %>/js/libs'], 8 | build : ['dist'], 9 | shims : ['<%= folders.src %>/js/shims'] 10 | }, 11 | build: { 12 | css : ['<%= folders.build %>/css'], 13 | js : ['<%= folders.build %>/js'] 14 | }, 15 | files: { 16 | grunt : ['gruntfile.js', 'grunt-tasks/*.js'], 17 | less : ['<%= folders.src %>/less/**/*.less'], 18 | js : ['<%= folders.src %>/js/app/*.js'] 19 | } 20 | }; -------------------------------------------------------------------------------- /grunt-tasks/misc.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | copy: { 5 | build: { 6 | files: [ 7 | {expand: true, cwd: '<%= folders.src %>/img', src: ['*'], dest: '<%= folders.build %>/img'} 8 | 9 | ] 10 | }, 11 | dev: { 12 | files: [ 13 | {expand: true, cwd: '<%= folders.src %>/js/app/playlist', src: ['*'], dest: '<%= folders.build %>/playlist'} 14 | ] 15 | } 16 | }, 17 | clean: { 18 | build: ['<%= folders.build %>/**/*'], 19 | css: ['<%= folders.build %>/css/*'], 20 | js: ['<%= folders.build %>/js/*', '<%= folders.build %>/playlist/*'] 21 | } 22 | }; -------------------------------------------------------------------------------- /grunt-tasks/styles.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | concat: { 5 | css: { 6 | options: { 7 | stripBanners: true 8 | }, 9 | src: ['<%= folders.libs %>/**/*.css', '<%= build.css %>/app.css'], 10 | dest: '<%= build.css %>/app.css' 11 | } 12 | }, 13 | 14 | // Compile LESS into CSS 15 | less: { 16 | options: { 17 | sourceMap: true, 18 | outputSourceFiles: true 19 | }, 20 | all: { 21 | files: { 22 | '<%= build.css %>/app.css': '<%= folders.src %>/less/app.less' 23 | } 24 | } 25 | }, 26 | 27 | // Concat & Minify CSS 28 | cssmin: { 29 | app: { 30 | files: { 31 | '<%= build.css %>/app.min.css' : ['<%= build.css %>/app.css'] 32 | } 33 | } 34 | } 35 | }; -------------------------------------------------------------------------------- /grunt-tasks/dev.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var fs = require('fs'), 4 | jshintrc = JSON.parse(fs.readFileSync('.jshintrc', 'utf8')); 5 | 6 | module.exports = { 7 | 8 | // JShint all custom JavaScript files 9 | jshint: { 10 | all: { 11 | options: jshintrc, 12 | files: { 13 | src: ['<%= files.grunt %>', '<%= files.js %>'] 14 | } 15 | } 16 | }, 17 | 18 | // Define "watch" tasks 19 | watch: { 20 | options: { 21 | livereload: true 22 | }, 23 | jshint_main: { 24 | files: ['<%= files.grunt %>', '<%= files.js %>'], 25 | tasks: ['jshint', 'clean:js', 'concat:js', 'uglify', 'copy:dev'] 26 | }, 27 | 28 | less: { 29 | files: ['<%= files.less %>'], 30 | tasks: ['clean:css', 'less', 'concat:css','cssmin'] 31 | } 32 | } 33 | 34 | }; -------------------------------------------------------------------------------- /grunt-tasks/scripts.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | 5 | concat: { 6 | js: { 7 | src: [ 8 | '<%= folders.libs %>/jquery-1.11.2.js', 9 | '<%= folders.libs %>/**/*.js', 10 | '<%= files.js %>' 11 | ], 12 | dest: '<%= build.js %>/app.js' 13 | } 14 | }, 15 | 16 | // Minify All JS Files 17 | uglify: { 18 | options: { 19 | compress : false, 20 | mangle : false, 21 | sourceMap : true, 22 | report : 'min' 23 | }, 24 | libs: { 25 | files: { 26 | '<%= build.js %>/app.min.js' : ['<%= build.js %>/app.js'] 27 | } 28 | }, 29 | inferior: { 30 | files: { 31 | '<%= build.js %>/shims.min.js' : [ 32 | '<%= folders.shims %>/modernizr.custom.js' 33 | ] 34 | } 35 | } 36 | } 37 | 38 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "white-noise-jplayer", 3 | "version": "1.1.0", 4 | "description": "Responsive circle jPlayer with playlist and custom theme", 5 | "main": "gruntfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Derick Montague", 10 | "license": "BSD", 11 | "dependencies": { 12 | "grunt": "0.4.x" 13 | }, 14 | "devDependencies": { 15 | "grunt": "^0.4.5", 16 | "grunt-contrib-clean": "^0.6.0", 17 | "grunt-contrib-concat": "^0.5.0", 18 | "grunt-contrib-copy": "^0.7.0", 19 | "grunt-contrib-cssmin": "^0.11.0", 20 | "grunt-contrib-jshint": "^0.10.0", 21 | "grunt-contrib-less": "^1.0.0", 22 | "grunt-contrib-uglify": "^0.7.0", 23 | "grunt-contrib-watch": "^0.6.1", 24 | "grunt-tasks": "^0.1.3" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/js/app/playlist/playlist.js: -------------------------------------------------------------------------------- 1 | var jsonPlaylist = [ 2 | { 3 | title: 'Bottom Feederz', 4 | artist: 'Snorkel', 5 | mp3: 'mp3/Bottom Feederz.mp3', 6 | free: false, 7 | duration: '2:49' 8 | }, 9 | { 10 | title: 'Pizza', 11 | artist: 'Snorkel', 12 | mp3: 'mp3/Pizza.mp3', 13 | free: false, 14 | duration: '5:38', 15 | 16 | }, 17 | { 18 | title: 'Piss & Moan', 19 | artist: 'Snorkel', 20 | mp3: 'mp3/Piss & Moan.mp3', 21 | free: false, 22 | duration: '6:14' 23 | }, 24 | { 25 | title: 'Country', 26 | artist: 'Snorkel', 27 | mp3: 'mp3/Country.mp3', 28 | free: false, 29 | duration: '3:29' 30 | }, 31 | { 32 | title: 'Smell Yer Fear', 33 | artist: 'Snorkel', 34 | mp3: 'mp3/Smell Yer Fear.mp3', 35 | free: false, 36 | duration: '4:04' 37 | }, 38 | { 39 | title: 'Untitled (OmegaMan Mix)', 40 | artist: 'Snorkel', 41 | mp3: 'mp3/Untitled (OmegaMan Mix).mp3', 42 | free: false, 43 | duration: '2:59' 44 | 45 | } 46 | ]; 47 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | responsive-jPlayer 2 | ================== 3 | 4 | A responsive audio player utilizing the open source jPlayer library (https://github.com/happyworm/jPlayer) and circle player (https://github.com/maboa/circleplayer). This player has a static playlist that can be defined using XML or JSON. If you choose to use the XML file, an ajax request will be used to get the data and format the playlist object. I added this option since it was the request from the person that asked me to create the skin. 5 | 6 | 7 | # Set Up 8 | 1. npm install 9 | 2. grunt build 10 | * Update either the src/js/app/playlist.js or .xml file. If you are going to use the XML file, you will need to set the "useJsonPlaylist" variable to false in the **src/js/app/app.js** file and then run grunt build. 11 | * The default grunt task will run development tasks and set a watch, so use Chrome and the Live Reload extension for development. 12 | 13 | 14 | Many, many thanks to Mark Panaghiston (@thepag) for such a great framework! 15 | -------------------------------------------------------------------------------- /src/js/app/app.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var useJsonPlaylist = true; 3 | 4 | // WhiteNoise Player instance 5 | whiteNoise = new CirclePlayer("#white-noise-player", {}, { 6 | cssSelectorAncestor: "#cp_container" 7 | }), 8 | 9 | // WhiteNoise Playlist instance 10 | myPlaylist = new jPlayerPlaylist({ 11 | jPlayer: "#white-noise-player", 12 | cssSelectorAncestor: "#cp_container", 13 | }, [ /* Playlist is creted when page loads */], 14 | { 15 | playlistOptions: { 16 | autoPlay: false, // self explanatory 17 | loopOnPrevious: true, // If loop is active, the playlist will loop back to the end when executing previous() 18 | shuffleOnLoop: true, // If loop and shuffle are active, the playlist will shuffle when executing next() on the last item 19 | enableRemoveControls: false, // Adds an x that allows user to remove songs from playlist 20 | displayTime: 0, // how fast the playlist transitions on page load 21 | addTime: 'fast', // transition time when adding a song 22 | removeTime: 'fast', // transition time when removing a song 23 | shuffleTime: 'slow' // transition time when shuffling playlist 24 | }, 25 | swfPath: "../../scripts", 26 | supplied: "mp3", // add the file format extension you will be streaming 27 | wmode: "window" 28 | }); 29 | 30 | if (useJsonPlaylist) { 31 | myPlaylist.setPlaylist(jsonPlaylist); 32 | } else { 33 | $.when( 34 | $.ajax({ 35 | type: "GET", 36 | url: "dist/playlist/playlist.xml", 37 | dataType: "xml", 38 | }) 39 | ).then(function(data) { 40 | var playlist = []; 41 | $(data).find('track').each(function(){ 42 | var self = $(this), 43 | mytitle = self.find('title').text(), 44 | myartist = self.find('artist').text(), 45 | mymp3 = self.find('mp3').text(), 46 | myduration = self.find('duration').text(), 47 | playlistJsonString = JSON.stringify({ title: mytitle, artist : myartist, mp3 : mymp3, duration : myduration }),// Convert the XML nodes into JSON formatted strings 48 | playlistObject = $.parseJSON(playlistJsonString); // Convert the JSON formatted strings into JSON objects and add to playlist 49 | 50 | playlist.push(playlistObject); 51 | }); 52 | 53 | myPlaylist.setPlaylist(playlist); 54 | }); 55 | } 56 | }()); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive jPlayer Layout 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

15 |
16 |
17 |
18 |
19 |

Music

20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 36 |
37 | 42 |
43 |
44 |
45 |

About Me

46 |
47 | 53 |
54 |
55 |

Contact Me

56 | emailme@mydomain.com 57 |
58 |
59 |
60 | Fork me on GitHub 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/less/circle-player.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Project: CirclePlayer 3 | * http://www.jplayer.org 4 | * 5 | * Copyright (c) 2012 Happyworm Ltd 6 | * 7 | * Author: Silvia Benvenuti 8 | * Edited by: Mark J Panaghiston 9 | * Date: 2nd October 2012 10 | * Artwork inspired by: http://forrst.com/posts/Untitled-CJz 11 | */ 12 | 13 | .cp-container { 14 | position:relative; 15 | width:104px; /* 200 - (2 * 48) */ 16 | height:104px; 17 | background:url("../img/bgr.jpg") 0 0 no-repeat; 18 | padding:48px; 19 | -webkit-tap-highlight-color:rgba(0,0,0,0); 20 | 21 | &:focus { 22 | border:none; 23 | outline:0; 24 | } 25 | 26 | /* FALLBACK for .progress 27 | * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step) 28 | * (It needs the container selector to work. Or use div) 29 | */ 30 | .cp-fallback { 31 | background:url("../img/progress_sprite.jpg") no-repeat; 32 | background-position:0 104px; 33 | } 34 | } 35 | 36 | .cp-buffer-1, 37 | .cp-buffer-2, 38 | .cp-progress-1, 39 | .cp-progress-2 { 40 | position:absolute; 41 | top:0; 42 | left:0; 43 | width:104px; 44 | height:104px; 45 | clip:rect(0px,52px,104px,0px); 46 | -moz-border-radius:52px; 47 | -webkit-border-radius:52px; 48 | border-radius:52px; 49 | } 50 | 51 | .cp-buffer-1, 52 | .cp-buffer-2 { 53 | background:url("../img/buffer.png") 0 0 no-repeat; 54 | } 55 | 56 | .cp-progress-1, 57 | .cp-progress-2 { 58 | background:url("../img/progress.png") 0 0 no-repeat; 59 | } 60 | 61 | .cp-buffer-holder, 62 | .cp-progress-holder, 63 | .cp-circle-control { 64 | position:absolute; 65 | width:104px; 66 | height:104px; 67 | } 68 | 69 | .cp-circle-control { 70 | cursor:pointer; 71 | } 72 | 73 | .cp-buffer-holder, 74 | .cp-progress-holder { 75 | clip:rect(0px,104px,104px,52px); 76 | display:none; 77 | } 78 | 79 | 80 | /* This is needed when progress is greater than 50% or for fallback */ 81 | 82 | .cp-buffer-holder.cp-gt50, 83 | .cp-progress-holder.cp-gt50, 84 | .cp-progress-1.cp-fallback{ 85 | clip:rect(auto, auto, auto, auto); 86 | } 87 | 88 | .cp-controls { 89 | margin:0; 90 | padding:26px; 91 | 92 | li { 93 | list-style-type:none; 94 | display:block; 95 | 96 | /*IE Fix*/ 97 | position:absolute; 98 | 99 | a { 100 | position:relative; 101 | display:block; 102 | width:50px; 103 | height:50px; 104 | text-indent:-9999px; 105 | z-index:1; 106 | cursor:pointer; 107 | } 108 | 109 | .cp-play { 110 | background:url("../img/controls.png") 0 0 no-repeat; 111 | 112 | &:hover { 113 | background:url("../img/controls.png") -50px 0 no-repeat; 114 | } 115 | } 116 | 117 | .cp-pause { 118 | background:url("../img/controls.png") 0 -50px no-repeat; 119 | 120 | &:hover { 121 | background:url("../img/controls.png") -50px -50px no-repeat; 122 | } 123 | } 124 | } 125 | } 126 | 127 | .cp-jplayer { 128 | width:0; 129 | height:0; 130 | } -------------------------------------------------------------------------------- /src/less/custom-player.less: -------------------------------------------------------------------------------- 1 | .cp-container { 2 | width: 162px; 3 | height: 162px; 4 | background: url("../img/bgr.png") 0 0 no-repeat; 5 | padding: 0; 6 | } 7 | 8 | .cp-buffer-1, 9 | .cp-buffer-2, 10 | .cp-progress-1, 11 | .cp-progress-2 { 12 | width: 162px; 13 | height: 162px; 14 | clip:rect(0, 81px, 162px, 0px); 15 | 16 | -moz-border-radius: 81px; 17 | -webkit-border-radius: 81px; 18 | border-radius: 81px; 19 | } 20 | 21 | .cp-buffer-1, 22 | .cp-buffer-2 { 23 | background: url("../img/buffer.png") 0 0 no-repeat; 24 | } 25 | 26 | /* FALLBACK for .progress 27 | * (24 steps starting from 1hr filled progress, Decrease second value by 162px for next step) 28 | * (It needs the container selector to work. Or use div) 29 | * This was not updated for white noise player to do use case 30 | 31 | 32 | .cp-container .cp-fallback { 33 | background: url("progress_sprite.jpg") no-repeat; 34 | background-position: 0 162px; 35 | } 36 | */ 37 | 38 | .cp-progress-1, 39 | .cp-progress-2 { 40 | background: url("../img/progress.png") 0 0 no-repeat; 41 | } 42 | 43 | .cp-buffer-holder, 44 | .cp-progress-holder, 45 | .cp-circle-control { 46 | width:162px; 47 | height:162px; 48 | } 49 | 50 | .cp-buffer-holder, 51 | .cp-progress-holder { 52 | clip:rect(0, 162px, 162px, 81px); 53 | } 54 | 55 | .cp-controls { 56 | padding: 53px; 57 | list-style: none; 58 | 59 | li { 60 | 61 | a { 62 | width: 60px; 63 | height: 60px; 64 | } 65 | 66 | .cp-play { 67 | background: url("../img/controls.png") 0 0 no-repeat; 68 | 69 | &:hover { 70 | background: url("../img/controls.png") -60px 0 no-repeat; 71 | } 72 | } 73 | 74 | .cp-pause { 75 | background: url("../img/controls.png") 0 -60px no-repeat; 76 | 77 | &:hover { 78 | background: url("../img/controls.png") -60px -60px no-repeat; 79 | } 80 | } 81 | } 82 | } 83 | 84 | 85 | body { 86 | background: url("../img/pg-bgd.png"); 87 | font: 80%/1.4 Arial, Helvetica, sans-serif; 88 | color: #949494; 89 | } 90 | img { 91 | max-width: 100%; 92 | } 93 | #wrapper { 94 | max-width: 860px; 95 | margin: 0 0 10px; 96 | } 97 | header { 98 | max-width: 845px; 99 | } 100 | #logo { 101 | background: url("../img/white-noise-logoX2.jpg") no-repeat; 102 | background-size: 320px 61px; 103 | height: 61px; 104 | width: 320px; 105 | margin: auto; 106 | } 107 | #content { 108 | background: url("../img/noise-bgd.jpg") repeat-x; 109 | } 110 | #contact { 111 | text-align: center; 112 | padding: 10px 0; 113 | } 114 | #music { 115 | position: none; 116 | border-radius: 5px 5px 0 0; 117 | padding: 10px 0 0; 118 | } 119 | h2 { 120 | font-family: 'Poiret One', sans-serif; 121 | text-shadow: 1px 1px 1px rgba(0,0,0,.6); 122 | font-size: 2.5em; 123 | text-align: center; 124 | } 125 | a { 126 | color: #80b9ff; 127 | text-decoration: none; 128 | text-shadow: 0 1px 2px #000; 129 | } 130 | a:hover,a:focus,a:active { 131 | outline: none; 132 | text-decoration: underline; 133 | } 134 | #about { 135 | background: #000; 136 | background: rgba(0,0,0,.75); 137 | min-height: 66px; 138 | font-size: 1.2em; 139 | } 140 | #about p { 141 | padding: 20px 3% 20px 10%; 142 | text-align: right; 143 | } 144 | #player-wrapper { 145 | margin-top: -10px; 146 | } 147 | .jp-playlist ul { 148 | border-radius: 10px; 149 | box-shadow: 0 0 5px #555, inset 0 0 6px #111; 150 | border: 1px solid #555; 151 | margin: -150px 1% 10px 19%; 152 | overflow: hidden; 153 | padding: 0; 154 | } 155 | .jp-playlist li { 156 | background: url("../img/playlist-item-bgd.png") repeat-x; 157 | box-shadow: 0 1px 1px #333; 158 | margin: 1px; 159 | padding: 9px 0 9px 100px; 160 | } 161 | .jp-playlist li:hover { 162 | background-color: rgba(255,255,255,.75); 163 | } 164 | li.jp-playlist-current { 165 | background: url("../img/playlist-item-current-bgd.png") repeat-x; 166 | 167 | } 168 | .jp-playlist li:first-child { 169 | border-radius: 0 7px 0 0 170 | } 171 | .jp-playlist li:last-child { 172 | border-radius: 0 0 7px 0 173 | } 174 | .jp-playlist li a { 175 | display: block; 176 | overflow: hidden; 177 | } 178 | .jp-duration { 179 | display:none; 180 | } 181 | #player-wrapper { 182 | position: absolute; 183 | top: 25px; 184 | left: 0; 185 | } 186 | 187 | @media screen and (min-width: 480px) { 188 | header { 189 | margin: 0 15px; 190 | } 191 | .jp-playlist ul { 192 | margin-left: 17%; 193 | } 194 | .jp-duration { 195 | display: inline-block; 196 | float: right; 197 | margin-right: 10px; 198 | } 199 | } 200 | @media screen and (min-width: 640px) { 201 | body { 202 | font-size: 100%; 203 | } 204 | h2 { 205 | margin: auto; 206 | font-size: 3.5em; 207 | } 208 | #wrapper { 209 | margin: 0 10px auto; 210 | } 211 | #logo { 212 | background-size: auto; 213 | height: 122px; 214 | width: 620px; 215 | } 216 | #content { 217 | border-radius: 15px; 218 | } 219 | .jp-playlist ul { 220 | margin-left: 10%; 221 | } 222 | #about p { 223 | padding-left: 30%; 224 | } 225 | } 226 | @media screen and (min-width: 1024px) { 227 | header { 228 | max-width: inherit; 229 | margin: auto; 230 | } 231 | #logo { 232 | background: url(../img/white-noise-logo-lg.jpg) right no-repeat; 233 | background-size: auto; 234 | height: 313px; 235 | float: left; 236 | width: 33.125%; 237 | } 238 | #wrapper { 239 | width: 65%; 240 | float: left; 241 | margin: 30px auto auto; 242 | } 243 | .jp-playlist ul { 244 | margin-left: 9%; 245 | } 246 | 247 | .jp-playlist li { 248 | padding-left: 15%; 249 | } 250 | } -------------------------------------------------------------------------------- /src/js/libs/jquery.grab.js: -------------------------------------------------------------------------------- 1 | /* 2 | jQuery grab 3 | https://github.com/jussi-kalliokoski/jQuery.grab 4 | Ported from Jin.js::gestures 5 | https://github.com/jussi-kalliokoski/jin.js/ 6 | Created by Jussi Kalliokoski 7 | Licensed under MIT License. 8 | 9 | Includes fix for IE 10 | */ 11 | 12 | 13 | (function($){ 14 | var extend = $.extend, 15 | mousedown = 'mousedown', 16 | mousemove = 'mousemove', 17 | mouseup = 'mouseup', 18 | touchstart = 'touchstart', 19 | touchmove = 'touchmove', 20 | touchend = 'touchend', 21 | touchcancel = 'touchcancel'; 22 | 23 | function unbind(elem, type, func){ 24 | if (type.substr(0,5) !== 'touch'){ // A temporary fix for IE8 data passing problem in Jin. 25 | return $(elem).unbind(type, func); 26 | } 27 | var fnc, i; 28 | for (i=0; i 0)) { 114 | if(self.audio.duration > 0) { 115 | var bufferTime = 0; 116 | for(var i = 0; i < self.audio.buffered.length; i++) { 117 | bufferTime += self.audio.buffered.end(i) - self.audio.buffered.start(i); 118 | // console.log(i + " | start = " + self.audio.buffered.start(i) + " | end = " + self.audio.buffered.end(i) + " | bufferTime = " + bufferTime + " | duration = " + self.audio.duration); 119 | } 120 | percent = 100 * bufferTime / self.audio.duration; 121 | } // else the Metadata has not been read yet. 122 | // console.log("percent = " + percent); 123 | } else { // Fallback if buffered not supported 124 | // percent = event.jPlayer.status.seekPercent; 125 | percent = 0; // Cleans up the inital conditions on all browsers, since seekPercent defaults to 100 when object is undefined. 126 | } 127 | self._progress(percent); // Problem here at initial condition. Due to the Opera clause above of buffered.length > 0 above... Removing it means Opera's white buffer ring never shows like with polyfill. 128 | // Firefox 4 does not always give the final progress event when buffered = 100% 129 | }); 130 | 131 | this.player.bind($.jPlayer.event.ended + this.eventNamespace, function(event) { 132 | self._resetSolution(); 133 | }); 134 | }, 135 | _initSolution: function() { 136 | if (this.cssTransforms) { 137 | this.jq.progressHolder.show(); 138 | this.jq.bufferHolder.show(); 139 | } 140 | else { 141 | this.jq.progressHolder.addClass(this.cssClass.gt50).show(); 142 | this.jq.progress1.addClass(this.cssClass.fallback); 143 | this.jq.progress2.hide(); 144 | this.jq.bufferHolder.hide(); 145 | } 146 | this._resetSolution(); 147 | }, 148 | _resetSolution: function() { 149 | if (this.cssTransforms) { 150 | this.jq.progressHolder.removeClass(this.cssClass.gt50); 151 | this.jq.progress1.css({'transform': 'rotate(0deg)'}); 152 | this.jq.progress2.css({'transform': 'rotate(0deg)'}).hide(); 153 | } 154 | else { 155 | this.jq.progress1.css('background-position', '0 ' + this.spritePitch + 'px'); 156 | } 157 | }, 158 | _initCircleControl: function() { 159 | var self = this; 160 | this.jq.circleControl.grab({ 161 | onstart: function(){ 162 | self.dragging = true; 163 | }, onmove: function(event){ 164 | var pc = self._getArcPercent(event.position.x, event.position.y); 165 | self.player.jPlayer("playHead", pc).jPlayer("play"); 166 | self._timeupdate(pc); 167 | }, onfinish: function(event){ 168 | self.dragging = false; 169 | var pc = self._getArcPercent(event.position.x, event.position.y); 170 | self.player.jPlayer("playHead", pc).jPlayer("play"); 171 | } 172 | }); 173 | }, 174 | _timeupdate: function(percent) { 175 | var degs = percent * 3.6+"deg"; 176 | 177 | var spriteOffset = (Math.floor((Math.round(percent))*this.spriteRatio)-1)*-this.spritePitch; 178 | 179 | if (percent <= 50) { 180 | if (this.cssTransforms) { 181 | this.jq.progressHolder.removeClass(this.cssClass.gt50); 182 | this.jq.progress1.css({'transform': 'rotate(' + degs + ')'}); 183 | this.jq.progress2.hide(); 184 | } else { // fall back 185 | this.jq.progress1.css('background-position', '0 '+spriteOffset+'px'); 186 | } 187 | } else if (percent <= 100) { 188 | if (this.cssTransforms) { 189 | this.jq.progressHolder.addClass(this.cssClass.gt50); 190 | this.jq.progress1.css({'transform': 'rotate(180deg)'}); 191 | this.jq.progress2.css({'transform': 'rotate(' + degs + ')'}); 192 | this.jq.progress2.show(); 193 | } else { // fall back 194 | this.jq.progress1.css('background-position', '0 '+spriteOffset+'px'); 195 | } 196 | } 197 | }, 198 | _progress: function(percent) { 199 | var degs = percent * 3.6+"deg"; 200 | 201 | if (this.cssTransforms) { 202 | if (percent <= 50) { 203 | this.jq.bufferHolder.removeClass(this.cssClass.gt50); 204 | this.jq.buffer1.css({'transform': 'rotate(' + degs + ')'}); 205 | this.jq.buffer2.hide(); 206 | } else if (percent <= 100) { 207 | this.jq.bufferHolder.addClass(this.cssClass.gt50); 208 | this.jq.buffer1.css({'transform': 'rotate(180deg)'}); 209 | this.jq.buffer2.show(); 210 | this.jq.buffer2.css({'transform': 'rotate(' + degs + ')'}); 211 | } 212 | } 213 | }, 214 | _getArcPercent: function(pageX, pageY) { 215 | var offset = this.jq.circleControl.offset(), 216 | x = pageX - offset.left - this.jq.circleControl.width()/2, 217 | y = pageY - offset.top - this.jq.circleControl.height()/2, 218 | theta = Math.atan2(y,x); 219 | 220 | if (theta > -1 * Math.PI && theta < -0.5 * Math.PI) { 221 | theta = 2 * Math.PI + theta; 222 | } 223 | 224 | // theta is now value between -0.5PI and 1.5PI 225 | // ready to be normalized and applied 226 | 227 | return (theta + Math.PI / 2) / 2 * Math.PI * 10; 228 | }, 229 | setMedia: function(media) { 230 | this.media = $.extend({}, media); 231 | this.player.jPlayer("setMedia", this.media); 232 | }, 233 | play: function(time) { 234 | this.player.jPlayer("play", time); 235 | }, 236 | pause: function(time) { 237 | this.player.jPlayer("pause", time); 238 | }, 239 | destroy: function() { 240 | this.player.unbind(this.eventNamespace); 241 | this.player.jPlayer("destroy"); 242 | } 243 | }; 244 | -------------------------------------------------------------------------------- /src/js/libs/jquery.transform.js: -------------------------------------------------------------------------------- 1 | /* 2 | * transform: A jQuery cssHooks adding cross-browser 2d transform capabilities to $.fn.css() and $.fn.animate() 3 | * 4 | * limitations: 5 | * - requires jQuery 1.4.3+ 6 | * - Should you use the *translate* property, then your elements need to be absolutely positionned in a relatively positionned wrapper **or it will fail in IE678**. 7 | * - transformOrigin is not accessible 8 | * 9 | * latest version and complete README available on Github: 10 | * https://github.com/louisremi/jquery.transform.js 11 | * 12 | * Copyright 2011 @louis_remi 13 | * Licensed under the MIT license. 14 | * 15 | * This saved you an hour of work? 16 | * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON 17 | * 18 | */ 19 | (function( $ ) { 20 | 21 | /* 22 | * Feature tests and global variables 23 | */ 24 | var div = document.createElement('div'), 25 | divStyle = div.style, 26 | propertyName = 'transform', 27 | suffix = 'Transform', 28 | testProperties = [ 29 | 'O' + suffix, 30 | 'ms' + suffix, 31 | 'Webkit' + suffix, 32 | 'Moz' + suffix, 33 | // prefix-less property 34 | propertyName 35 | ], 36 | i = testProperties.length, 37 | supportProperty, 38 | supportMatrixFilter, 39 | propertyHook, 40 | propertyGet, 41 | rMatrix = /Matrix([^)]*)/; 42 | 43 | // test different vendor prefixes of this property 44 | while ( i-- ) { 45 | if ( testProperties[i] in divStyle ) { 46 | $.support[propertyName] = supportProperty = testProperties[i]; 47 | continue; 48 | } 49 | } 50 | // IE678 alternative 51 | if ( !supportProperty ) { 52 | $.support.matrixFilter = supportMatrixFilter = divStyle.filter === ''; 53 | } 54 | // prevent IE memory leak 55 | div = divStyle = null; 56 | 57 | // px isn't the default unit of this property 58 | $.cssNumber[propertyName] = true; 59 | 60 | /* 61 | * fn.css() hooks 62 | */ 63 | if ( supportProperty && supportProperty != propertyName ) { 64 | // Modern browsers can use jQuery.cssProps as a basic hook 65 | $.cssProps[propertyName] = supportProperty; 66 | 67 | // Firefox needs a complete hook because it stuffs matrix with 'px' 68 | if ( supportProperty == 'Moz' + suffix ) { 69 | propertyHook = { 70 | get: function( elem, computed ) { 71 | return (computed ? 72 | // remove 'px' from the computed matrix 73 | $.css( elem, supportProperty ).split('px').join(''): 74 | elem.style[supportProperty] 75 | ) 76 | }, 77 | set: function( elem, value ) { 78 | // remove 'px' from matrices 79 | elem.style[supportProperty] = /matrix[^)p]*\)/.test(value) ? 80 | value.replace(/matrix((?:[^,]*,){4})([^,]*),([^)]*)/, 'matrix$1$2px,$3px'): 81 | value; 82 | } 83 | } 84 | /* Fix two jQuery bugs still present in 1.5.1 85 | * - rupper is incompatible with IE9, see http://jqbug.com/8346 86 | * - jQuery.css is not really jQuery.cssProps aware, see http://jqbug.com/8402 87 | */ 88 | } else if ( /^1\.[0-5](?:\.|$)/.test($.fn.jquery) ) { 89 | propertyHook = { 90 | get: function( elem, computed ) { 91 | return (computed ? 92 | $.css( elem, supportProperty.replace(/^ms/, 'Ms') ): 93 | elem.style[supportProperty] 94 | ) 95 | } 96 | } 97 | } 98 | /* TODO: leverage hardware acceleration of 3d transform in Webkit only 99 | else if ( supportProperty == 'Webkit' + suffix && support3dTransform ) { 100 | propertyHook = { 101 | set: function( elem, value ) { 102 | elem.style[supportProperty] = 103 | value.replace(); 104 | } 105 | } 106 | }*/ 107 | 108 | } else if ( supportMatrixFilter ) { 109 | propertyHook = { 110 | get: function( elem, computed ) { 111 | var elemStyle = ( computed && elem.currentStyle ? elem.currentStyle : elem.style ), 112 | matrix; 113 | 114 | if ( elemStyle && rMatrix.test( elemStyle.filter ) ) { 115 | matrix = RegExp.$1.split(','); 116 | matrix = [ 117 | matrix[0].split('=')[1], 118 | matrix[2].split('=')[1], 119 | matrix[1].split('=')[1], 120 | matrix[3].split('=')[1] 121 | ]; 122 | } else { 123 | matrix = [1,0,0,1]; 124 | } 125 | matrix[4] = elemStyle ? elemStyle.left : 0; 126 | matrix[5] = elemStyle ? elemStyle.top : 0; 127 | return "matrix(" + matrix + ")"; 128 | }, 129 | set: function( elem, value, animate ) { 130 | var elemStyle = elem.style, 131 | currentStyle, 132 | Matrix, 133 | filter; 134 | 135 | if ( !animate ) { 136 | elemStyle.zoom = 1; 137 | } 138 | 139 | value = matrix(value); 140 | 141 | // rotate, scale and skew 142 | if ( !animate || animate.M ) { 143 | Matrix = [ 144 | "Matrix("+ 145 | "M11="+value[0], 146 | "M12="+value[2], 147 | "M21="+value[1], 148 | "M22="+value[3], 149 | "SizingMethod='auto expand'" 150 | ].join(); 151 | filter = ( currentStyle = elem.currentStyle ) && currentStyle.filter || elemStyle.filter || ""; 152 | 153 | elemStyle.filter = rMatrix.test(filter) ? 154 | filter.replace(rMatrix, Matrix) : 155 | filter + " progid:DXImageTransform.Microsoft." + Matrix + ")"; 156 | 157 | // center the transform origin, from pbakaus's Transformie http://github.com/pbakaus/transformie 158 | if ( (centerOrigin = $.transform.centerOrigin) ) { 159 | elemStyle[centerOrigin == 'margin' ? 'marginLeft' : 'left'] = -(elem.offsetWidth/2) + (elem.clientWidth/2) + 'px'; 160 | elemStyle[centerOrigin == 'margin' ? 'marginTop' : 'top'] = -(elem.offsetHeight/2) + (elem.clientHeight/2) + 'px'; 161 | } 162 | } 163 | 164 | // translate 165 | if ( !animate || animate.T ) { 166 | // We assume that the elements are absolute positionned inside a relative positionned wrapper 167 | elemStyle.left = value[4] + 'px'; 168 | elemStyle.top = value[5] + 'px'; 169 | } 170 | } 171 | } 172 | } 173 | // populate jQuery.cssHooks with the appropriate hook if necessary 174 | if ( propertyHook ) { 175 | $.cssHooks[propertyName] = propertyHook; 176 | } 177 | // we need a unique setter for the animation logic 178 | propertyGet = propertyHook && propertyHook.get || $.css; 179 | 180 | /* 181 | * fn.animate() hooks 182 | */ 183 | $.fx.step.transform = function( fx ) { 184 | var elem = fx.elem, 185 | start = fx.start, 186 | end = fx.end, 187 | split, 188 | pos = fx.pos, 189 | transform, 190 | translate, 191 | rotate, 192 | scale, 193 | skew, 194 | T = false, 195 | M = false, 196 | prop; 197 | translate = rotate = scale = skew = ''; 198 | 199 | // fx.end and fx.start need to be converted to their translate/rotate/scale/skew components 200 | // so that we can interpolate them 201 | if ( !start || typeof start === "string" ) { 202 | // the following block can be commented out with jQuery 1.5.1+, see #7912 203 | if (!start) { 204 | start = propertyGet( elem, supportProperty ); 205 | } 206 | 207 | // force layout only once per animation 208 | if ( supportMatrixFilter ) { 209 | elem.style.zoom = 1; 210 | } 211 | 212 | // if the start computed matrix is in end, we are doing a relative animation 213 | split = end.split(start); 214 | if ( split.length == 2 ) { 215 | // remove the start computed matrix to make animations more accurate 216 | end = split.join(''); 217 | fx.origin = start; 218 | start = 'none'; 219 | } 220 | 221 | // start is either 'none' or a matrix(...) that has to be parsed 222 | fx.start = start = start == 'none'? 223 | { 224 | translate: [0,0], 225 | rotate: 0, 226 | scale: [1,1], 227 | skew: [0,0] 228 | }: 229 | unmatrix( toArray(start) ); 230 | 231 | // fx.end has to be parsed and decomposed 232 | fx.end = end = ~end.indexOf('matrix')? 233 | // bullet-proof parser 234 | unmatrix(matrix(end)): 235 | // faster and more precise parser 236 | components(end); 237 | 238 | // get rid of properties that do not change 239 | for ( prop in start) { 240 | if ( prop == 'rotate' ? 241 | start[prop] == end[prop]: 242 | start[prop][0] == end[prop][0] && start[prop][1] == end[prop][1] 243 | ) { 244 | delete start[prop]; 245 | } 246 | } 247 | } 248 | 249 | /* 250 | * We want a fast interpolation algorithm. 251 | * This implies avoiding function calls and sacrifying DRY principle: 252 | * - avoid $.each(function(){}) 253 | * - round values using bitewise hacks, see http://jsperf.com/math-round-vs-hack/3 254 | */ 255 | if ( start.translate ) { 256 | // round translate to the closest pixel 257 | translate = ' translate('+ 258 | ((start.translate[0] + (end.translate[0] - start.translate[0]) * pos + .5) | 0) +'px,'+ 259 | ((start.translate[1] + (end.translate[1] - start.translate[1]) * pos + .5) | 0) +'px'+ 260 | ')'; 261 | T = true; 262 | } 263 | if ( start.rotate != undefined ) { 264 | rotate = ' rotate('+ (start.rotate + (end.rotate - start.rotate) * pos) +'rad)'; 265 | M = true; 266 | } 267 | if ( start.scale ) { 268 | scale = ' scale('+ 269 | (start.scale[0] + (end.scale[0] - start.scale[0]) * pos) +','+ 270 | (start.scale[1] + (end.scale[1] - start.scale[1]) * pos) + 271 | ')'; 272 | M = true; 273 | } 274 | if ( start.skew ) { 275 | skew = ' skew('+ 276 | (start.skew[0] + (end.skew[0] - start.skew[0]) * pos) +'rad,'+ 277 | (start.skew[1] + (end.skew[1] - start.skew[1]) * pos) +'rad'+ 278 | ')'; 279 | M = true; 280 | } 281 | 282 | // In case of relative animation, restore the origin computed matrix here. 283 | transform = fx.origin ? 284 | fx.origin + translate + skew + scale + rotate: 285 | translate + rotate + scale + skew; 286 | 287 | propertyHook && propertyHook.set ? 288 | propertyHook.set( elem, transform, {M: M, T: T} ): 289 | elem.style[supportProperty] = transform; 290 | }; 291 | 292 | /* 293 | * Utility functions 294 | */ 295 | 296 | // turns a transform string into its 'matrix(A,B,C,D,X,Y)' form (as an array, though) 297 | function matrix( transform ) { 298 | transform = transform.split(')'); 299 | var 300 | trim = $.trim 301 | // last element of the array is an empty string, get rid of it 302 | , i = transform.length -1 303 | , split, prop, val 304 | , A = 1 305 | , B = 0 306 | , C = 0 307 | , D = 1 308 | , A_, B_, C_, D_ 309 | , tmp1, tmp2 310 | , X = 0 311 | , Y = 0 312 | ; 313 | // Loop through the transform properties, parse and multiply them 314 | while (i--) { 315 | split = transform[i].split('('); 316 | prop = trim(split[0]); 317 | val = split[1]; 318 | A_ = B_ = C_ = D_ = 0; 319 | 320 | switch (prop) { 321 | case 'translateX': 322 | X += parseInt(val, 10); 323 | continue; 324 | 325 | case 'translateY': 326 | Y += parseInt(val, 10); 327 | continue; 328 | 329 | case 'translate': 330 | val = val.split(','); 331 | X += parseInt(val[0], 10); 332 | Y += parseInt(val[1] || 0, 10); 333 | continue; 334 | 335 | case 'rotate': 336 | val = toRadian(val); 337 | A_ = Math.cos(val); 338 | B_ = Math.sin(val); 339 | C_ = -Math.sin(val); 340 | D_ = Math.cos(val); 341 | break; 342 | 343 | case 'scaleX': 344 | A_ = val; 345 | D_ = 1; 346 | break; 347 | 348 | case 'scaleY': 349 | A_ = 1; 350 | D_ = val; 351 | break; 352 | 353 | case 'scale': 354 | val = val.split(','); 355 | A_ = val[0]; 356 | D_ = val.length>1 ? val[1] : val[0]; 357 | break; 358 | 359 | case 'skewX': 360 | A_ = D_ = 1; 361 | C_ = Math.tan(toRadian(val)); 362 | break; 363 | 364 | case 'skewY': 365 | A_ = D_ = 1; 366 | B_ = Math.tan(toRadian(val)); 367 | break; 368 | 369 | case 'skew': 370 | A_ = D_ = 1; 371 | val = val.split(','); 372 | C_ = Math.tan(toRadian(val[0])); 373 | B_ = Math.tan(toRadian(val[1] || 0)); 374 | break; 375 | 376 | case 'matrix': 377 | val = val.split(','); 378 | A_ = +val[0]; 379 | B_ = +val[1]; 380 | C_ = +val[2]; 381 | D_ = +val[3]; 382 | X += parseInt(val[4], 10); 383 | Y += parseInt(val[5], 10); 384 | } 385 | // Matrix product 386 | tmp1 = A * A_ + B * C_; 387 | B = A * B_ + B * D_; 388 | tmp2 = C * A_ + D * C_; 389 | D = C * B_ + D * D_; 390 | A = tmp1; 391 | C = tmp2; 392 | } 393 | return [A,B,C,D,X,Y]; 394 | } 395 | 396 | // turns a matrix into its rotate, scale and skew components 397 | // algorithm from http://hg.mozilla.org/mozilla-central/file/7cb3e9795d04/layout/style/nsStyleAnimation.cpp 398 | function unmatrix(matrix) { 399 | var 400 | scaleX 401 | , scaleY 402 | , skew 403 | , A = matrix[0] 404 | , B = matrix[1] 405 | , C = matrix[2] 406 | , D = matrix[3] 407 | ; 408 | 409 | // Make sure matrix is not singular 410 | if ( A * D - B * C ) { 411 | // step (3) 412 | scaleX = Math.sqrt( A * A + B * B ); 413 | A /= scaleX; 414 | B /= scaleX; 415 | // step (4) 416 | skew = A * C + B * D; 417 | C -= A * skew; 418 | D -= B * skew; 419 | // step (5) 420 | scaleY = Math.sqrt( C * C + D * D ); 421 | C /= scaleY; 422 | D /= scaleY; 423 | skew /= scaleY; 424 | // step (6) 425 | if ( A * D < B * C ) { 426 | //scaleY = -scaleY; 427 | //skew = -skew; 428 | A = -A; 429 | B = -B; 430 | skew = -skew; 431 | scaleX = -scaleX; 432 | } 433 | 434 | // matrix is singular and cannot be interpolated 435 | } else { 436 | rotate = scaleX = scaleY = skew = 0; 437 | } 438 | 439 | return { 440 | translate: [+matrix[4], +matrix[5]], 441 | rotate: Math.atan2(B, A), 442 | scale: [scaleX, scaleY], 443 | skew: [skew, 0] 444 | } 445 | } 446 | 447 | // parse tranform components of a transform string not containing 'matrix(...)' 448 | function components( transform ) { 449 | // split the != transforms 450 | transform = transform.split(')'); 451 | 452 | var translate = [0,0], 453 | rotate = 0, 454 | scale = [1,1], 455 | skew = [0,0], 456 | i = transform.length -1, 457 | trim = $.trim, 458 | split, name, value; 459 | 460 | // add components 461 | while ( i-- ) { 462 | split = transform[i].split('('); 463 | name = trim(split[0]); 464 | value = split[1]; 465 | 466 | if (name == 'translateX') { 467 | translate[0] += parseInt(value, 10); 468 | 469 | } else if (name == 'translateY') { 470 | translate[1] += parseInt(value, 10); 471 | 472 | } else if (name == 'translate') { 473 | value = value.split(','); 474 | translate[0] += parseInt(value[0], 10); 475 | translate[1] += parseInt(value[1] || 0, 10); 476 | 477 | } else if (name == 'rotate') { 478 | rotate += toRadian(value); 479 | 480 | } else if (name == 'scaleX') { 481 | scale[0] *= value; 482 | 483 | } else if (name == 'scaleY') { 484 | scale[1] *= value; 485 | 486 | } else if (name == 'scale') { 487 | value = value.split(','); 488 | scale[0] *= value[0]; 489 | scale[1] *= (value.length>1? value[1] : value[0]); 490 | 491 | } else if (name == 'skewX') { 492 | skew[0] += toRadian(value); 493 | 494 | } else if (name == 'skewY') { 495 | skew[1] += toRadian(value); 496 | 497 | } else if (name == 'skew') { 498 | value = value.split(','); 499 | skew[0] += toRadian(value[0]); 500 | skew[1] += toRadian(value[1] || '0'); 501 | } 502 | } 503 | 504 | return { 505 | translate: translate, 506 | rotate: rotate, 507 | scale: scale, 508 | skew: skew 509 | }; 510 | } 511 | 512 | // converts an angle string in any unit to a radian Float 513 | function toRadian(value) { 514 | return ~value.indexOf('deg') ? 515 | parseInt(value,10) * (Math.PI * 2 / 360): 516 | ~value.indexOf('grad') ? 517 | parseInt(value,10) * (Math.PI/200): 518 | parseFloat(value); 519 | } 520 | 521 | // Converts 'matrix(A,B,C,D,X,Y)' to [A,B,C,D,X,Y] 522 | function toArray(matrix) { 523 | // Fremove the unit of X and Y for Firefox 524 | matrix = /\(([^,]*),([^,]*),([^,]*),([^,]*),([^,p]*)(?:px)?,([^)p]*)(?:px)?/.exec(matrix); 525 | return [matrix[1], matrix[2], matrix[3], matrix[4], matrix[5], matrix[6]]; 526 | } 527 | 528 | $.transform = { 529 | centerOrigin: 'margin' 530 | }; 531 | 532 | })( jQuery ); -------------------------------------------------------------------------------- /src/js/libs/jplayer.playlist.modified.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Playlist Object for the jPlayer Plugin 3 | * http://www.jplayer.org 4 | * 5 | * Copyright (c) 2009 - 2014 Happyworm Ltd 6 | * Licensed under the MIT license. 7 | * http://www.opensource.org/licenses/MIT 8 | * 9 | * Author: Mark J Panaghiston 10 | * Version: 2.4.1 11 | * Date: 19th November 2014 12 | * 13 | * Requires: 14 | * - jQuery 1.7.0+ 15 | * - jPlayer 2.8.2+ 16 | */ 17 | 18 | /*global jPlayerPlaylist:true */ 19 | 20 | (function($, undefined) { 21 | 22 | jPlayerPlaylist = function(cssSelector, playlist, options) { 23 | var self = this; 24 | 25 | this.current = 0; 26 | this.loop = false; // Flag used with the jPlayer repeat event 27 | this.shuffled = false; 28 | this.removing = false; // Flag is true during remove animation, disabling the remove() method until complete. 29 | 30 | this.cssSelector = $.extend({}, this._cssSelector, cssSelector); // Object: Containing the css selectors for jPlayer and its cssSelectorAncestor 31 | this.options = $.extend(true, { 32 | keyBindings: { 33 | next: { 34 | key: 221, // ] 35 | fn: function() { 36 | self.next(); 37 | } 38 | }, 39 | previous: { 40 | key: 219, // [ 41 | fn: function() { 42 | self.previous(); 43 | } 44 | }, 45 | shuffle: { 46 | key: 83, // s 47 | fn: function() { 48 | self.shuffle(); 49 | } 50 | } 51 | }, 52 | stateClass: { 53 | shuffled: "jp-state-shuffled" 54 | } 55 | }, this._options, options); // Object: The jPlayer constructor options for this playlist and the playlist options 56 | 57 | this.playlist = []; // Array of Objects: The current playlist displayed (Un-shuffled or Shuffled) 58 | this.original = []; // Array of Objects: The original playlist 59 | 60 | this._initPlaylist(playlist); // Copies playlist to this.original. Then mirrors this.original to this.playlist. Creating two arrays, where the element pointers match. (Enables pointer comparison.) 61 | 62 | // Setup the css selectors for the extra interface items used by the playlist. 63 | this.cssSelector.details = this.cssSelector.cssSelectorAncestor + " .jp-details"; // Note that jPlayer controls the text in the title element. 64 | this.cssSelector.playlist = this.cssSelector.cssSelectorAncestor + " .jp-playlist"; 65 | this.cssSelector.next = this.cssSelector.cssSelectorAncestor + " .jp-next"; 66 | this.cssSelector.previous = this.cssSelector.cssSelectorAncestor + " .jp-previous"; 67 | this.cssSelector.shuffle = this.cssSelector.cssSelectorAncestor + " .jp-shuffle"; 68 | this.cssSelector.shuffleOff = this.cssSelector.cssSelectorAncestor + " .jp-shuffle-off"; 69 | 70 | // Override the cssSelectorAncestor given in options 71 | this.options.cssSelectorAncestor = this.cssSelector.cssSelectorAncestor; 72 | 73 | // Override the default repeat event handler 74 | this.options.repeat = function(event) { 75 | self.loop = event.jPlayer.options.loop; 76 | }; 77 | 78 | // Create a ready event handler to initialize the playlist 79 | $(this.cssSelector.jPlayer).bind($.jPlayer.event.ready, function() { 80 | self._init(); 81 | }); 82 | 83 | // Create an ended event handler to move to the next item 84 | $(this.cssSelector.jPlayer).bind($.jPlayer.event.ended, function() { 85 | self.next(); 86 | }); 87 | 88 | // Create a play event handler to pause other instances 89 | $(this.cssSelector.jPlayer).bind($.jPlayer.event.play, function() { 90 | $(this).jPlayer("pauseOthers"); 91 | }); 92 | 93 | // Create a resize event handler to show the title in full screen mode. 94 | $(this.cssSelector.jPlayer).bind($.jPlayer.event.resize, function(event) { 95 | if(event.jPlayer.options.fullScreen) { 96 | $(self.cssSelector.details).show(); 97 | } else { 98 | $(self.cssSelector.details).hide(); 99 | } 100 | }); 101 | 102 | // Create click handlers for the extra buttons that do playlist functions. 103 | $(this.cssSelector.previous).click(function(e) { 104 | e.preventDefault(); 105 | self.previous(); 106 | self.blur(this); 107 | }); 108 | 109 | $(this.cssSelector.next).click(function(e) { 110 | e.preventDefault(); 111 | self.next(); 112 | self.blur(this); 113 | }); 114 | 115 | $(this.cssSelector.shuffle).click(function(e) { 116 | e.preventDefault(); 117 | if(self.shuffled && $(self.cssSelector.jPlayer).jPlayer("option", "useStateClassSkin")) { 118 | self.shuffle(false); 119 | } else { 120 | self.shuffle(true); 121 | } 122 | self.blur(this); 123 | }); 124 | $(this.cssSelector.shuffleOff).click(function(e) { 125 | e.preventDefault(); 126 | self.shuffle(false); 127 | self.blur(this); 128 | }).hide(); 129 | 130 | // Put the title in its initial display state 131 | if(!this.options.fullScreen) { 132 | $(this.cssSelector.details).hide(); 133 | } 134 | 135 | // Remove the empty
  • from the page HTML. Allows page to be valid HTML, while not interfereing with display animations 136 | $(this.cssSelector.playlist + " ul").empty(); 137 | 138 | // Create .on() handlers for the playlist items along with the free media and remove controls. 139 | this._createItemHandlers(); 140 | 141 | // Instance jPlayer 142 | $(this.cssSelector.jPlayer).jPlayer(this.options); 143 | }; 144 | 145 | jPlayerPlaylist.prototype = { 146 | _cssSelector: { // static object, instanced in constructor 147 | jPlayer: "#jquery_jplayer_1", 148 | cssSelectorAncestor: "#jp_container_1" 149 | }, 150 | _options: { // static object, instanced in constructor 151 | playlistOptions: { 152 | autoPlay: false, 153 | loopOnPrevious: false, 154 | shuffleOnLoop: true, 155 | enableRemoveControls: false, 156 | displayTime: 'slow', 157 | addTime: 'fast', 158 | removeTime: 'fast', 159 | shuffleTime: 'slow', 160 | itemClass: "jp-playlist-item", 161 | freeGroupClass: "jp-free-media", 162 | freeItemClass: "jp-playlist-item-free", 163 | removeItemClass: "jp-playlist-item-remove" 164 | } 165 | }, 166 | option: function(option, value) { // For changing playlist options only 167 | if(value === undefined) { 168 | return this.options.playlistOptions[option]; 169 | } 170 | 171 | this.options.playlistOptions[option] = value; 172 | 173 | switch(option) { 174 | case "enableRemoveControls": 175 | this._updateControls(); 176 | break; 177 | case "itemClass": 178 | case "freeGroupClass": 179 | case "freeItemClass": 180 | case "removeItemClass": 181 | this._refresh(true); // Instant 182 | this._createItemHandlers(); 183 | break; 184 | } 185 | return this; 186 | }, 187 | _init: function() { 188 | var self = this; 189 | this._refresh(function() { 190 | if(self.options.playlistOptions.autoPlay) { 191 | self.play(self.current); 192 | } else { 193 | self.select(self.current); 194 | } 195 | }); 196 | }, 197 | _initPlaylist: function(playlist) { 198 | this.current = 0; 199 | this.shuffled = false; 200 | this.removing = false; 201 | this.original = $.extend(true, [], playlist); // Copy the Array of Objects 202 | this._originalPlaylist(); 203 | }, 204 | _originalPlaylist: function() { 205 | var self = this; 206 | this.playlist = []; 207 | // Make both arrays point to the same object elements. Gives us 2 different arrays, each pointing to the same actual object. ie., Not copies of the object. 208 | $.each(this.original, function(i) { 209 | self.playlist[i] = self.original[i]; 210 | }); 211 | }, 212 | _refresh: function(instant) { 213 | /* instant: Can be undefined, true or a function. 214 | * undefined -> use animation timings 215 | * true -> no animation 216 | * function -> use animation timings and excute function at half way point. 217 | */ 218 | var self = this; 219 | 220 | if(instant && !$.isFunction(instant)) { 221 | $(this.cssSelector.playlist + " ul").empty(); 222 | $.each(this.playlist, function(i) { 223 | $(self.cssSelector.playlist + " ul").append(self._createListItem(self.playlist[i])); 224 | }); 225 | this._updateControls(); 226 | } else { 227 | var displayTime = $(this.cssSelector.playlist + " ul").children().length ? this.options.playlistOptions.displayTime : 0; 228 | 229 | $(this.cssSelector.playlist + " ul").slideUp(displayTime, function() { 230 | var $this = $(this); 231 | $(this).empty(); 232 | 233 | $.each(self.playlist, function(i) { 234 | $this.append(self._createListItem(self.playlist[i])); 235 | }); 236 | self._updateControls(); 237 | if($.isFunction(instant)) { 238 | instant(); 239 | } 240 | if(self.playlist.length) { 241 | $(this).slideDown(self.options.playlistOptions.displayTime); 242 | } else { 243 | $(this).show(); 244 | } 245 | }); 246 | } 247 | }, 248 | _createListItem: function(media) { 249 | var self = this; 250 | 251 | // Wrap the
  • contents in a
    252 | var listItem = "
  • "; 253 | 254 | // Create remove control 255 | listItem += "×"; 256 | 257 | // Create links to free media 258 | if(media.free) { 259 | console.log(media); 260 | var first = true; 261 | listItem += "("; 262 | $.each(media, function(property,value) { 263 | if($.jPlayer.prototype.format[property]) { // Check property is a media format. 264 | if(first) { 265 | first = false; 266 | } else { 267 | listItem += " | "; 268 | } 269 | listItem += "" + property + ""; 270 | } 271 | }); 272 | listItem += ")"; 273 | } 274 | 275 | // The title is given next in the HTML otherwise the float:right on the free media corrupts in IE6/7 276 | listItem += "" + media.title + (media.artist ? " " : "") + (media.duration ? "":"") + ""; 277 | listItem += "
  • "; 278 | 279 | return listItem; 280 | }, 281 | _createItemHandlers: function() { 282 | var self = this; 283 | // Create live handlers for the playlist items 284 | $(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.itemClass).on("click", "a." + this.options.playlistOptions.itemClass, function(e) { 285 | e.preventDefault(); 286 | var index = $(this).parent().parent().index(); 287 | if(self.current !== index) { 288 | self.play(index); 289 | } else { 290 | $(self.cssSelector.jPlayer).jPlayer("play"); 291 | } 292 | self.blur(this); 293 | }); 294 | 295 | // Create live handlers that disable free media links to force access via right click 296 | $(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.freeItemClass).on("click", "a." + this.options.playlistOptions.freeItemClass, function(e) { 297 | e.preventDefault(); 298 | $(this).parent().parent().find("." + self.options.playlistOptions.itemClass).click(); 299 | self.blur(this); 300 | }); 301 | 302 | // Create live handlers for the remove controls 303 | $(this.cssSelector.playlist).off("click", "a." + this.options.playlistOptions.removeItemClass).on("click", "a." + this.options.playlistOptions.removeItemClass, function(e) { 304 | e.preventDefault(); 305 | var index = $(this).parent().parent().index(); 306 | self.remove(index); 307 | self.blur(this); 308 | }); 309 | }, 310 | _updateControls: function() { 311 | if(this.options.playlistOptions.enableRemoveControls) { 312 | $(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).show(); 313 | } else { 314 | $(this.cssSelector.playlist + " ." + this.options.playlistOptions.removeItemClass).hide(); 315 | } 316 | if(this.shuffled) { 317 | $(this.cssSelector.jPlayer).jPlayer("addStateClass", "shuffled"); 318 | } else { 319 | $(this.cssSelector.jPlayer).jPlayer("removeStateClass", "shuffled"); 320 | } 321 | if($(this.cssSelector.shuffle).length && $(this.cssSelector.shuffleOff).length) { 322 | if(this.shuffled) { 323 | $(this.cssSelector.shuffleOff).show(); 324 | $(this.cssSelector.shuffle).hide(); 325 | } else { 326 | $(this.cssSelector.shuffleOff).hide(); 327 | $(this.cssSelector.shuffle).show(); 328 | } 329 | } 330 | }, 331 | _highlight: function(index) { 332 | if(this.playlist.length && index !== undefined) { 333 | $(this.cssSelector.playlist + " .jp-playlist-current").removeClass("jp-playlist-current"); 334 | $(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").addClass("jp-playlist-current").find(".jp-playlist-item").addClass("jp-playlist-current"); 335 | //$(this.cssSelector.details + " li").html("" + (this.playlist[index].artist ? " " : "") + (this.playlist[index].duration ? "" : "")); 336 | } 337 | }, 338 | setPlaylist: function(playlist) { 339 | this._initPlaylist(playlist); 340 | this._init(); 341 | }, 342 | add: function(media, playNow) { 343 | $(this.cssSelector.playlist + " ul").append(this._createListItem(media)).find("li:last-child").hide().slideDown(this.options.playlistOptions.addTime); 344 | this._updateControls(); 345 | this.original.push(media); 346 | this.playlist.push(media); // Both array elements share the same object pointer. Comforms with _initPlaylist(p) system. 347 | 348 | if(playNow) { 349 | this.play(this.playlist.length - 1); 350 | } else { 351 | if(this.original.length === 1) { 352 | this.select(0); 353 | } 354 | } 355 | }, 356 | remove: function(index) { 357 | var self = this; 358 | 359 | if(index === undefined) { 360 | this._initPlaylist([]); 361 | this._refresh(function() { 362 | $(self.cssSelector.jPlayer).jPlayer("clearMedia"); 363 | }); 364 | return true; 365 | } else { 366 | 367 | if(this.removing) { 368 | return false; 369 | } else { 370 | index = (index < 0) ? self.original.length + index : index; // Negative index relates to end of array. 371 | if(0 <= index && index < this.playlist.length) { 372 | this.removing = true; 373 | 374 | $(this.cssSelector.playlist + " li:nth-child(" + (index + 1) + ")").slideUp(this.options.playlistOptions.removeTime, function() { 375 | $(this).remove(); 376 | 377 | if(self.shuffled) { 378 | var item = self.playlist[index]; 379 | $.each(self.original, function(i) { 380 | if(self.original[i] === item) { 381 | self.original.splice(i, 1); 382 | return false; // Exit $.each 383 | } 384 | }); 385 | self.playlist.splice(index, 1); 386 | } else { 387 | self.original.splice(index, 1); 388 | self.playlist.splice(index, 1); 389 | } 390 | 391 | if(self.original.length) { 392 | if(index === self.current) { 393 | self.current = (index < self.original.length) ? self.current : self.original.length - 1; // To cope when last element being selected when it was removed 394 | self.select(self.current); 395 | } else if(index < self.current) { 396 | self.current--; 397 | } 398 | } else { 399 | $(self.cssSelector.jPlayer).jPlayer("clearMedia"); 400 | self.current = 0; 401 | self.shuffled = false; 402 | self._updateControls(); 403 | } 404 | 405 | self.removing = false; 406 | }); 407 | } 408 | return true; 409 | } 410 | } 411 | }, 412 | select: function(index) { 413 | index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array. 414 | if(0 <= index && index < this.playlist.length) { 415 | this.current = index; 416 | this._highlight(index); 417 | $(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]); 418 | } else { 419 | this.current = 0; 420 | } 421 | }, 422 | play: function(index) { 423 | index = (index < 0) ? this.original.length + index : index; // Negative index relates to end of array. 424 | if(0 <= index && index < this.playlist.length) { 425 | if(this.playlist.length) { 426 | this.select(index); 427 | $(this.cssSelector.jPlayer).jPlayer("play"); 428 | } 429 | } else if(index === undefined) { 430 | $(this.cssSelector.jPlayer).jPlayer("play"); 431 | } 432 | }, 433 | pause: function() { 434 | $(this.cssSelector.jPlayer).jPlayer("pause"); 435 | }, 436 | next: function() { 437 | var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0; 438 | 439 | if(this.loop) { 440 | // See if we need to shuffle before looping to start, and only shuffle if more than 1 item. 441 | if(index === 0 && this.shuffled && this.options.playlistOptions.shuffleOnLoop && this.playlist.length > 1) { 442 | this.shuffle(true, true); // playNow 443 | } else { 444 | this.play(index); 445 | } 446 | } else { 447 | // The index will be zero if it just looped round 448 | if(index > 0) { 449 | this.play(index); 450 | } 451 | } 452 | }, 453 | previous: function() { 454 | var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1; 455 | 456 | if(this.loop && this.options.playlistOptions.loopOnPrevious || index < this.playlist.length - 1) { 457 | this.play(index); 458 | } 459 | }, 460 | shuffle: function(shuffled, playNow) { 461 | var self = this; 462 | 463 | if(shuffled === undefined) { 464 | shuffled = !this.shuffled; 465 | } 466 | 467 | if(shuffled || shuffled !== this.shuffled) { 468 | 469 | $(this.cssSelector.playlist + " ul").slideUp(this.options.playlistOptions.shuffleTime, function() { 470 | self.shuffled = shuffled; 471 | if(shuffled) { 472 | self.playlist.sort(function() { 473 | return 0.5 - Math.random(); 474 | }); 475 | } else { 476 | self._originalPlaylist(); 477 | } 478 | self._refresh(true); // Instant 479 | 480 | if(playNow || !$(self.cssSelector.jPlayer).data("jPlayer").status.paused) { 481 | self.play(0); 482 | } else { 483 | self.select(0); 484 | } 485 | 486 | $(this).slideDown(self.options.playlistOptions.shuffleTime); 487 | }); 488 | } 489 | }, 490 | blur: function(that) { 491 | if($(this.cssSelector.jPlayer).jPlayer("option", "autoBlur")) { 492 | $(that).blur(); 493 | } 494 | } 495 | }; 496 | })(jQuery); -------------------------------------------------------------------------------- /src/js/shims/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.8.3 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ; 5 | 6 | 7 | 8 | window.Modernizr = (function( window, document, undefined ) { 9 | 10 | var version = '2.8.3', 11 | 12 | Modernizr = {}, 13 | 14 | enableClasses = true, 15 | 16 | docElement = document.documentElement, 17 | 18 | mod = 'modernizr', 19 | modElem = document.createElement(mod), 20 | mStyle = modElem.style, 21 | 22 | inputElem , 23 | 24 | 25 | toString = {}.toString, 26 | 27 | prefixes = ' -webkit- -moz- -o- -ms- '.split(' '), 28 | 29 | 30 | 31 | omPrefixes = 'Webkit Moz O ms', 32 | 33 | cssomPrefixes = omPrefixes.split(' '), 34 | 35 | domPrefixes = omPrefixes.toLowerCase().split(' '), 36 | 37 | 38 | tests = {}, 39 | inputs = {}, 40 | attrs = {}, 41 | 42 | classes = [], 43 | 44 | slice = classes.slice, 45 | 46 | featureName, 47 | 48 | 49 | injectElementWithStyles = function( rule, callback, nodes, testnames ) { 50 | 51 | var style, ret, node, docOverflow, 52 | div = document.createElement('div'), 53 | body = document.body, 54 | fakeBody = body || document.createElement('body'); 55 | 56 | if ( parseInt(nodes, 10) ) { 57 | while ( nodes-- ) { 58 | node = document.createElement('div'); 59 | node.id = testnames ? testnames[nodes] : mod + (nodes + 1); 60 | div.appendChild(node); 61 | } 62 | } 63 | 64 | style = ['­',''].join(''); 65 | div.id = mod; 66 | (body ? div : fakeBody).innerHTML += style; 67 | fakeBody.appendChild(div); 68 | if ( !body ) { 69 | fakeBody.style.background = ''; 70 | fakeBody.style.overflow = 'hidden'; 71 | docOverflow = docElement.style.overflow; 72 | docElement.style.overflow = 'hidden'; 73 | docElement.appendChild(fakeBody); 74 | } 75 | 76 | ret = callback(div, rule); 77 | if ( !body ) { 78 | fakeBody.parentNode.removeChild(fakeBody); 79 | docElement.style.overflow = docOverflow; 80 | } else { 81 | div.parentNode.removeChild(div); 82 | } 83 | 84 | return !!ret; 85 | 86 | }, 87 | _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp; 88 | 89 | if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) { 90 | hasOwnProp = function (object, property) { 91 | return _hasOwnProperty.call(object, property); 92 | }; 93 | } 94 | else { 95 | hasOwnProp = function (object, property) { 96 | return ((property in object) && is(object.constructor.prototype[property], 'undefined')); 97 | }; 98 | } 99 | 100 | 101 | if (!Function.prototype.bind) { 102 | Function.prototype.bind = function bind(that) { 103 | 104 | var target = this; 105 | 106 | if (typeof target != "function") { 107 | throw new TypeError(); 108 | } 109 | 110 | var args = slice.call(arguments, 1), 111 | bound = function () { 112 | 113 | if (this instanceof bound) { 114 | 115 | var F = function(){}; 116 | F.prototype = target.prototype; 117 | var self = new F(); 118 | 119 | var result = target.apply( 120 | self, 121 | args.concat(slice.call(arguments)) 122 | ); 123 | if (Object(result) === result) { 124 | return result; 125 | } 126 | return self; 127 | 128 | } else { 129 | 130 | return target.apply( 131 | that, 132 | args.concat(slice.call(arguments)) 133 | ); 134 | 135 | } 136 | 137 | }; 138 | 139 | return bound; 140 | }; 141 | } 142 | 143 | function setCss( str ) { 144 | mStyle.cssText = str; 145 | } 146 | 147 | function setCssAll( str1, str2 ) { 148 | return setCss(prefixes.join(str1 + ';') + ( str2 || '' )); 149 | } 150 | 151 | function is( obj, type ) { 152 | return typeof obj === type; 153 | } 154 | 155 | function contains( str, substr ) { 156 | return !!~('' + str).indexOf(substr); 157 | } 158 | 159 | function testProps( props, prefixed ) { 160 | for ( var i in props ) { 161 | var prop = props[i]; 162 | if ( !contains(prop, "-") && mStyle[prop] !== undefined ) { 163 | return prefixed == 'pfx' ? prop : true; 164 | } 165 | } 166 | return false; 167 | } 168 | 169 | function testDOMProps( props, obj, elem ) { 170 | for ( var i in props ) { 171 | var item = obj[props[i]]; 172 | if ( item !== undefined) { 173 | 174 | if (elem === false) return props[i]; 175 | 176 | if (is(item, 'function')){ 177 | return item.bind(elem || obj); 178 | } 179 | 180 | return item; 181 | } 182 | } 183 | return false; 184 | } 185 | 186 | function testPropsAll( prop, prefixed, elem ) { 187 | 188 | var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1), 189 | props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' '); 190 | 191 | if(is(prefixed, "string") || is(prefixed, "undefined")) { 192 | return testProps(props, prefixed); 193 | 194 | } else { 195 | props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' '); 196 | return testDOMProps(props, prefixed, elem); 197 | } 198 | } 199 | 200 | 201 | tests['csstransforms'] = function() { 202 | return !!testPropsAll('transform'); 203 | }; 204 | 205 | 206 | tests['csstransforms3d'] = function() { 207 | 208 | var ret = !!testPropsAll('perspective'); 209 | 210 | if ( ret && 'webkitPerspective' in docElement.style ) { 211 | 212 | injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) { 213 | ret = node.offsetLeft === 9 && node.offsetHeight === 3; 214 | }); 215 | } 216 | return ret; 217 | }; 218 | 219 | 220 | tests['csstransitions'] = function() { 221 | return testPropsAll('transition'); 222 | }; 223 | 224 | 225 | 226 | for ( var feature in tests ) { 227 | if ( hasOwnProp(tests, feature) ) { 228 | featureName = feature.toLowerCase(); 229 | Modernizr[featureName] = tests[feature](); 230 | 231 | classes.push((Modernizr[featureName] ? '' : 'no-') + featureName); 232 | } 233 | } 234 | 235 | 236 | 237 | Modernizr.addTest = function ( feature, test ) { 238 | if ( typeof feature == 'object' ) { 239 | for ( var key in feature ) { 240 | if ( hasOwnProp( feature, key ) ) { 241 | Modernizr.addTest( key, feature[ key ] ); 242 | } 243 | } 244 | } else { 245 | 246 | feature = feature.toLowerCase(); 247 | 248 | if ( Modernizr[feature] !== undefined ) { 249 | return Modernizr; 250 | } 251 | 252 | test = typeof test == 'function' ? test() : test; 253 | 254 | if (typeof enableClasses !== "undefined" && enableClasses) { 255 | docElement.className += ' ' + (test ? '' : 'no-') + feature; 256 | } 257 | Modernizr[feature] = test; 258 | 259 | } 260 | 261 | return Modernizr; 262 | }; 263 | 264 | 265 | setCss(''); 266 | modElem = inputElem = null; 267 | 268 | ;(function(window, document) { 269 | var version = '3.7.0'; 270 | 271 | var options = window.html5 || {}; 272 | 273 | var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i; 274 | 275 | var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i; 276 | 277 | var supportsHtml5Styles; 278 | 279 | var expando = '_html5shiv'; 280 | 281 | var expanID = 0; 282 | 283 | var expandoData = {}; 284 | 285 | var supportsUnknownElements; 286 | 287 | (function() { 288 | try { 289 | var a = document.createElement('a'); 290 | a.innerHTML = ''; 291 | supportsHtml5Styles = ('hidden' in a); 292 | 293 | supportsUnknownElements = a.childNodes.length == 1 || (function() { 294 | (document.createElement)('a'); 295 | var frag = document.createDocumentFragment(); 296 | return ( 297 | typeof frag.cloneNode == 'undefined' || 298 | typeof frag.createDocumentFragment == 'undefined' || 299 | typeof frag.createElement == 'undefined' 300 | ); 301 | }()); 302 | } catch(e) { 303 | supportsHtml5Styles = true; 304 | supportsUnknownElements = true; 305 | } 306 | 307 | }()); 308 | 309 | function addStyleSheet(ownerDocument, cssText) { 310 | var p = ownerDocument.createElement('p'), 311 | parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement; 312 | 313 | p.innerHTML = 'x'; 314 | return parent.insertBefore(p.lastChild, parent.firstChild); 315 | } 316 | 317 | function getElements() { 318 | var elements = html5.elements; 319 | return typeof elements == 'string' ? elements.split(' ') : elements; 320 | } 321 | 322 | function getExpandoData(ownerDocument) { 323 | var data = expandoData[ownerDocument[expando]]; 324 | if (!data) { 325 | data = {}; 326 | expanID++; 327 | ownerDocument[expando] = expanID; 328 | expandoData[expanID] = data; 329 | } 330 | return data; 331 | } 332 | 333 | function createElement(nodeName, ownerDocument, data){ 334 | if (!ownerDocument) { 335 | ownerDocument = document; 336 | } 337 | if(supportsUnknownElements){ 338 | return ownerDocument.createElement(nodeName); 339 | } 340 | if (!data) { 341 | data = getExpandoData(ownerDocument); 342 | } 343 | var node; 344 | 345 | if (data.cache[nodeName]) { 346 | node = data.cache[nodeName].cloneNode(); 347 | } else if (saveClones.test(nodeName)) { 348 | node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode(); 349 | } else { 350 | node = data.createElem(nodeName); 351 | } 352 | 353 | return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node; 354 | } 355 | 356 | function createDocumentFragment(ownerDocument, data){ 357 | if (!ownerDocument) { 358 | ownerDocument = document; 359 | } 360 | if(supportsUnknownElements){ 361 | return ownerDocument.createDocumentFragment(); 362 | } 363 | data = data || getExpandoData(ownerDocument); 364 | var clone = data.frag.cloneNode(), 365 | i = 0, 366 | elems = getElements(), 367 | l = elems.length; 368 | for(;i -1); 1029 | self.flash.canPlay[format] = self.format[format].flashCanPlay && self.flash.available; 1030 | }); 1031 | this.html.desired = false; 1032 | this.aurora.desired = false; 1033 | this.flash.desired = false; 1034 | $.each(this.solutions, function(solutionPriority, solution) { 1035 | if(solutionPriority === 0) { 1036 | self[solution].desired = true; 1037 | } else { 1038 | var audioCanPlay = false; 1039 | var videoCanPlay = false; 1040 | $.each(self.formats, function(formatPriority, format) { 1041 | if(self[self.solutions[0]].canPlay[format]) { // The other solution can play 1042 | if(self.format[format].media === 'video') { 1043 | videoCanPlay = true; 1044 | } else { 1045 | audioCanPlay = true; 1046 | } 1047 | } 1048 | }); 1049 | self[solution].desired = (self.require.audio && !audioCanPlay) || (self.require.video && !videoCanPlay); 1050 | } 1051 | }); 1052 | // This is what jPlayer will support, based on solution and supplied. 1053 | this.html.support = {}; 1054 | this.aurora.support = {}; 1055 | this.flash.support = {}; 1056 | $.each(this.formats, function(priority, format) { 1057 | self.html.support[format] = self.html.canPlay[format] && self.html.desired; 1058 | self.aurora.support[format] = self.aurora.canPlay[format] && self.aurora.desired; 1059 | self.flash.support[format] = self.flash.canPlay[format] && self.flash.desired; 1060 | }); 1061 | // If jPlayer is supporting any format in a solution, then the solution is used. 1062 | this.html.used = false; 1063 | this.aurora.used = false; 1064 | this.flash.used = false; 1065 | $.each(this.solutions, function(solutionPriority, solution) { 1066 | $.each(self.formats, function(formatPriority, format) { 1067 | if(self[solution].support[format]) { 1068 | self[solution].used = true; 1069 | return false; 1070 | } 1071 | }); 1072 | }); 1073 | 1074 | // Init solution active state and the event gates to false. 1075 | this._resetActive(); 1076 | this._resetGate(); 1077 | 1078 | // Set up the css selectors for the control and feedback entities. 1079 | this._cssSelectorAncestor(this.options.cssSelectorAncestor); 1080 | 1081 | // If neither html nor aurora nor flash are being used by this browser, then media playback is not possible. Trigger an error event. 1082 | if(!(this.html.used || this.aurora.used || this.flash.used)) { 1083 | this._error( { 1084 | type: $.jPlayer.error.NO_SOLUTION, 1085 | context: "{solution:'" + this.options.solution + "', supplied:'" + this.options.supplied + "'}", 1086 | message: $.jPlayer.errorMsg.NO_SOLUTION, 1087 | hint: $.jPlayer.errorHint.NO_SOLUTION 1088 | }); 1089 | if(this.css.jq.noSolution.length) { 1090 | this.css.jq.noSolution.show(); 1091 | } 1092 | } else { 1093 | if(this.css.jq.noSolution.length) { 1094 | this.css.jq.noSolution.hide(); 1095 | } 1096 | } 1097 | 1098 | // Add the flash solution if it is being used. 1099 | if(this.flash.used) { 1100 | var htmlObj, 1101 | flashVars = 'jQuery=' + encodeURI(this.options.noConflict) + '&id=' + encodeURI(this.internal.self.id) + '&vol=' + this.options.volume + '&muted=' + this.options.muted; 1102 | 1103 | // Code influenced by SWFObject 2.2: http://code.google.com/p/swfobject/ 1104 | // Non IE browsers have an initial Flash size of 1 by 1 otherwise the wmode affected the Flash ready event. 1105 | 1106 | if($.jPlayer.browser.msie && (Number($.jPlayer.browser.version) < 9 || $.jPlayer.browser.documentMode < 9)) { 1107 | var objStr = ''; 1108 | 1109 | var paramStr = [ 1110 | '', 1111 | '', 1112 | '', 1113 | '', 1114 | '' 1115 | ]; 1116 | 1117 | htmlObj = document.createElement(objStr); 1118 | for(var i=0; i < paramStr.length; i++) { 1119 | htmlObj.appendChild(document.createElement(paramStr[i])); 1120 | } 1121 | } else { 1122 | var createParam = function(el, n, v) { 1123 | var p = document.createElement("param"); 1124 | p.setAttribute("name", n); 1125 | p.setAttribute("value", v); 1126 | el.appendChild(p); 1127 | }; 1128 | 1129 | htmlObj = document.createElement("object"); 1130 | htmlObj.setAttribute("id", this.internal.flash.id); 1131 | htmlObj.setAttribute("name", this.internal.flash.id); 1132 | htmlObj.setAttribute("data", this.internal.flash.swf); 1133 | htmlObj.setAttribute("type", "application/x-shockwave-flash"); 1134 | htmlObj.setAttribute("width", "1"); // Non-zero 1135 | htmlObj.setAttribute("height", "1"); // Non-zero 1136 | htmlObj.setAttribute("tabindex", "-1"); 1137 | createParam(htmlObj, "flashvars", flashVars); 1138 | createParam(htmlObj, "allowscriptaccess", "always"); 1139 | createParam(htmlObj, "bgcolor", this.options.backgroundColor); 1140 | createParam(htmlObj, "wmode", this.options.wmode); 1141 | } 1142 | 1143 | this.element.append(htmlObj); 1144 | this.internal.flash.jq = $(htmlObj); 1145 | } 1146 | 1147 | // Setup playbackRate ability before using _addHtmlEventListeners() 1148 | if(this.html.used && !this.flash.used) { // If only HTML 1149 | // Using the audio element capabilities for playbackRate. ie., Assuming video element is the same. 1150 | this.status.playbackRateEnabled = this._testPlaybackRate('audio'); 1151 | } else { 1152 | this.status.playbackRateEnabled = false; 1153 | } 1154 | 1155 | this._updatePlaybackRate(); 1156 | 1157 | // Add the HTML solution if being used. 1158 | if(this.html.used) { 1159 | 1160 | // The HTML Audio handlers 1161 | if(this.html.audio.available) { 1162 | this._addHtmlEventListeners(this.htmlElement.audio, this.html.audio); 1163 | this.element.append(this.htmlElement.audio); 1164 | this.internal.audio.jq = $("#" + this.internal.audio.id); 1165 | } 1166 | 1167 | // The HTML Video handlers 1168 | if(this.html.video.available) { 1169 | this._addHtmlEventListeners(this.htmlElement.video, this.html.video); 1170 | this.element.append(this.htmlElement.video); 1171 | this.internal.video.jq = $("#" + this.internal.video.id); 1172 | if(this.status.nativeVideoControls) { 1173 | this.internal.video.jq.css({'width': this.status.width, 'height': this.status.height}); 1174 | } else { 1175 | this.internal.video.jq.css({'width':'0px', 'height':'0px'}); // Using size 0x0 since a .hide() causes issues in iOS 1176 | } 1177 | this.internal.video.jq.bind("click.jPlayer", function() { 1178 | self._trigger($.jPlayer.event.click); 1179 | }); 1180 | } 1181 | } 1182 | 1183 | // Add the Aurora.js solution if being used. 1184 | if(this.aurora.used) { 1185 | // Aurora.js player need to be created for each media, see setMedia function. 1186 | } 1187 | 1188 | // Create the bridge that emulates the HTML Media element on the jPlayer DIV 1189 | if( this.options.emulateHtml ) { 1190 | this._emulateHtmlBridge(); 1191 | } 1192 | 1193 | if((this.html.used || this.aurora.used) && !this.flash.used) { // If only HTML, then emulate flash ready() call after 100ms. 1194 | setTimeout( function() { 1195 | self.internal.ready = true; 1196 | self.version.flash = "n/a"; 1197 | self._trigger($.jPlayer.event.repeat); // Trigger the repeat event so its handler can initialize itself with the loop option. 1198 | self._trigger($.jPlayer.event.ready); 1199 | }, 100); 1200 | } 1201 | 1202 | // Initialize the interface components with the options. 1203 | this._updateNativeVideoControls(); 1204 | // The other controls are now setup in _cssSelectorAncestor() 1205 | if(this.css.jq.videoPlay.length) { 1206 | this.css.jq.videoPlay.hide(); 1207 | } 1208 | 1209 | $.jPlayer.prototype.count++; // Change static variable via prototype. 1210 | }, 1211 | destroy: function() { 1212 | // MJP: The background change remains. Would need to store the original to restore it correctly. 1213 | // MJP: The jPlayer element's size change remains. 1214 | 1215 | // Clear the media to reset the GUI and stop any downloads. Streams on some browsers had persited. (Chrome) 1216 | this.clearMedia(); 1217 | // Remove the size/sizeFull cssClass from the cssSelectorAncestor 1218 | this._removeUiClass(); 1219 | // Remove the times from the GUI 1220 | if(this.css.jq.currentTime.length) { 1221 | this.css.jq.currentTime.text(""); 1222 | } 1223 | if(this.css.jq.duration.length) { 1224 | this.css.jq.duration.text(""); 1225 | } 1226 | // Remove any bindings from the interface controls. 1227 | $.each(this.css.jq, function(fn, jq) { 1228 | // Check selector is valid before trying to execute method. 1229 | if(jq.length) { 1230 | jq.unbind(".jPlayer"); 1231 | } 1232 | }); 1233 | // Remove the click handlers for $.jPlayer.event.click 1234 | this.internal.poster.jq.unbind(".jPlayer"); 1235 | if(this.internal.video.jq) { 1236 | this.internal.video.jq.unbind(".jPlayer"); 1237 | } 1238 | // Remove the fullscreen event handlers 1239 | this._fullscreenRemoveEventListeners(); 1240 | // Remove key bindings 1241 | if(this === $.jPlayer.focus) { 1242 | $.jPlayer.focus = null; 1243 | } 1244 | // Destroy the HTML bridge. 1245 | if(this.options.emulateHtml) { 1246 | this._destroyHtmlBridge(); 1247 | } 1248 | this.element.removeData("jPlayer"); // Remove jPlayer data 1249 | this.element.unbind(".jPlayer"); // Remove all event handlers created by the jPlayer constructor 1250 | this.element.empty(); // Remove the inserted child elements 1251 | 1252 | delete this.instances[this.internal.instance]; // Clear the instance on the static instance object 1253 | }, 1254 | destroyRemoved: function() { // Destroy any instances that have gone away. 1255 | var self = this; 1256 | $.each(this.instances, function(i, element) { 1257 | if(self.element !== element) { // Do not destroy this instance. 1258 | if(!element.data("jPlayer")) { // Check that element is a real jPlayer. 1259 | element.jPlayer("destroy"); 1260 | delete self.instances[i]; 1261 | } 1262 | } 1263 | }); 1264 | }, 1265 | enable: function() { // Plan to implement 1266 | // options.disabled = false 1267 | }, 1268 | disable: function () { // Plan to implement 1269 | // options.disabled = true 1270 | }, 1271 | _testCanPlayType: function(elem) { 1272 | // IE9 on Win Server 2008 did not implement canPlayType(), but it has the property. 1273 | try { 1274 | elem.canPlayType(this.format.mp3.codec); // The type is irrelevant. 1275 | return true; 1276 | } catch(err) { 1277 | return false; 1278 | } 1279 | }, 1280 | _testPlaybackRate: function(type) { 1281 | // type: String 'audio' or 'video' 1282 | var el, rate = 0.5; 1283 | type = typeof type === 'string' ? type : 'audio'; 1284 | el = document.createElement(type); 1285 | // Wrapping in a try/catch, just in case older HTML5 browsers throw and error. 1286 | try { 1287 | if('playbackRate' in el) { 1288 | el.playbackRate = rate; 1289 | return el.playbackRate === rate; 1290 | } else { 1291 | return false; 1292 | } 1293 | } catch(err) { 1294 | return false; 1295 | } 1296 | }, 1297 | _uaBlocklist: function(list) { 1298 | // list : object with properties that are all regular expressions. Property names are irrelevant. 1299 | // Returns true if the user agent is matched in list. 1300 | var ua = navigator.userAgent.toLowerCase(), 1301 | block = false; 1302 | 1303 | $.each(list, function(p, re) { 1304 | if(re && re.test(ua)) { 1305 | block = true; 1306 | return false; // exit $.each. 1307 | } 1308 | }); 1309 | return block; 1310 | }, 1311 | _restrictNativeVideoControls: function() { 1312 | // Fallback to noFullWindow when nativeVideoControls is true and audio media is being used. Affects when both media types are used. 1313 | if(this.require.audio) { 1314 | if(this.status.nativeVideoControls) { 1315 | this.status.nativeVideoControls = false; 1316 | this.status.noFullWindow = true; 1317 | } 1318 | } 1319 | }, 1320 | _updateNativeVideoControls: function() { 1321 | if(this.html.video.available && this.html.used) { 1322 | // Turn the HTML Video controls on/off 1323 | this.htmlElement.video.controls = this.status.nativeVideoControls; 1324 | // Show/hide the jPlayer GUI. 1325 | this._updateAutohide(); 1326 | // For when option changed. The poster image is not updated, as it is dealt with in setMedia(). Acceptable degradation since seriously doubt these options will change on the fly. Can again review later. 1327 | if(this.status.nativeVideoControls && this.require.video) { 1328 | this.internal.poster.jq.hide(); 1329 | this.internal.video.jq.css({'width': this.status.width, 'height': this.status.height}); 1330 | } else if(this.status.waitForPlay && this.status.video) { 1331 | this.internal.poster.jq.show(); 1332 | this.internal.video.jq.css({'width': '0px', 'height': '0px'}); 1333 | } 1334 | } 1335 | }, 1336 | _addHtmlEventListeners: function(mediaElement, entity) { 1337 | var self = this; 1338 | mediaElement.preload = this.options.preload; 1339 | mediaElement.muted = this.options.muted; 1340 | mediaElement.volume = this.options.volume; 1341 | 1342 | if(this.status.playbackRateEnabled) { 1343 | mediaElement.defaultPlaybackRate = this.options.defaultPlaybackRate; 1344 | mediaElement.playbackRate = this.options.playbackRate; 1345 | } 1346 | 1347 | // Create the event listeners 1348 | // Only want the active entity to affect jPlayer and bubble events. 1349 | // Using entity.gate so that object is referenced and gate property always current 1350 | 1351 | mediaElement.addEventListener("progress", function() { 1352 | if(entity.gate) { 1353 | if(self.internal.cmdsIgnored && this.readyState > 0) { // Detect iOS executed the command 1354 | self.internal.cmdsIgnored = false; 1355 | } 1356 | self._getHtmlStatus(mediaElement); 1357 | self._updateInterface(); 1358 | self._trigger($.jPlayer.event.progress); 1359 | } 1360 | }, false); 1361 | mediaElement.addEventListener("loadeddata", function() { 1362 | if(entity.gate) { 1363 | self.androidFix.setMedia = false; // Disable the fix after the first progress event. 1364 | if(self.androidFix.play) { // Play Android audio - performing the fix. 1365 | self.androidFix.play = false; 1366 | self.play(self.androidFix.time); 1367 | } 1368 | if(self.androidFix.pause) { // Pause Android audio at time - performing the fix. 1369 | self.androidFix.pause = false; 1370 | self.pause(self.androidFix.time); 1371 | } 1372 | self._trigger($.jPlayer.event.loadeddata); 1373 | } 1374 | }, false); 1375 | mediaElement.addEventListener("timeupdate", function() { 1376 | if(entity.gate) { 1377 | self._getHtmlStatus(mediaElement); 1378 | self._updateInterface(); 1379 | self._trigger($.jPlayer.event.timeupdate); 1380 | } 1381 | }, false); 1382 | mediaElement.addEventListener("durationchange", function() { 1383 | if(entity.gate) { 1384 | self._getHtmlStatus(mediaElement); 1385 | self._updateInterface(); 1386 | self._trigger($.jPlayer.event.durationchange); 1387 | } 1388 | }, false); 1389 | mediaElement.addEventListener("play", function() { 1390 | if(entity.gate) { 1391 | self._updateButtons(true); 1392 | self._html_checkWaitForPlay(); // So the native controls update this variable and puts the hidden interface in the correct state. Affects toggling native controls. 1393 | self._trigger($.jPlayer.event.play); 1394 | } 1395 | }, false); 1396 | mediaElement.addEventListener("playing", function() { 1397 | if(entity.gate) { 1398 | self._updateButtons(true); 1399 | self._seeked(); 1400 | self._trigger($.jPlayer.event.playing); 1401 | } 1402 | }, false); 1403 | mediaElement.addEventListener("pause", function() { 1404 | if(entity.gate) { 1405 | self._updateButtons(false); 1406 | self._trigger($.jPlayer.event.pause); 1407 | } 1408 | }, false); 1409 | mediaElement.addEventListener("waiting", function() { 1410 | if(entity.gate) { 1411 | self._seeking(); 1412 | self._trigger($.jPlayer.event.waiting); 1413 | } 1414 | }, false); 1415 | mediaElement.addEventListener("seeking", function() { 1416 | if(entity.gate) { 1417 | self._seeking(); 1418 | self._trigger($.jPlayer.event.seeking); 1419 | } 1420 | }, false); 1421 | mediaElement.addEventListener("seeked", function() { 1422 | if(entity.gate) { 1423 | self._seeked(); 1424 | self._trigger($.jPlayer.event.seeked); 1425 | } 1426 | }, false); 1427 | mediaElement.addEventListener("volumechange", function() { 1428 | if(entity.gate) { 1429 | // Read the values back from the element as the Blackberry PlayBook shares the volume with the physical buttons master volume control. 1430 | // However, when tested 6th July 2011, those buttons do not generate an event. The physical play/pause button does though. 1431 | self.options.volume = mediaElement.volume; 1432 | self.options.muted = mediaElement.muted; 1433 | self._updateMute(); 1434 | self._updateVolume(); 1435 | self._trigger($.jPlayer.event.volumechange); 1436 | } 1437 | }, false); 1438 | mediaElement.addEventListener("ratechange", function() { 1439 | if(entity.gate) { 1440 | self.options.defaultPlaybackRate = mediaElement.defaultPlaybackRate; 1441 | self.options.playbackRate = mediaElement.playbackRate; 1442 | self._updatePlaybackRate(); 1443 | self._trigger($.jPlayer.event.ratechange); 1444 | } 1445 | }, false); 1446 | mediaElement.addEventListener("suspend", function() { // Seems to be the only way of capturing that the iOS4 browser did not actually play the media from the page code. ie., It needs a user gesture. 1447 | if(entity.gate) { 1448 | self._seeked(); 1449 | self._trigger($.jPlayer.event.suspend); 1450 | } 1451 | }, false); 1452 | mediaElement.addEventListener("ended", function() { 1453 | if(entity.gate) { 1454 | // Order of the next few commands are important. Change the time and then pause. 1455 | // Solves a bug in Firefox, where issuing pause 1st causes the media to play from the start. ie., The pause is ignored. 1456 | if(!$.jPlayer.browser.webkit) { // Chrome crashes if you do this in conjunction with a setMedia command in an ended event handler. ie., The playlist demo. 1457 | self.htmlElement.media.currentTime = 0; // Safari does not care about this command. ie., It works with or without this line. (Both Safari and Chrome are Webkit.) 1458 | } 1459 | self.htmlElement.media.pause(); // Pause otherwise a click on the progress bar will play from that point, when it shouldn't, since it stopped playback. 1460 | self._updateButtons(false); 1461 | self._getHtmlStatus(mediaElement, true); // With override true. Otherwise Chrome leaves progress at full. 1462 | self._updateInterface(); 1463 | self._trigger($.jPlayer.event.ended); 1464 | } 1465 | }, false); 1466 | mediaElement.addEventListener("error", function() { 1467 | if(entity.gate) { 1468 | self._updateButtons(false); 1469 | self._seeked(); 1470 | if(self.status.srcSet) { // Deals with case of clearMedia() causing an error event. 1471 | clearTimeout(self.internal.htmlDlyCmdId); // Clears any delayed commands used in the HTML solution. 1472 | self.status.waitForLoad = true; // Allows the load operation to try again. 1473 | self.status.waitForPlay = true; // Reset since a play was captured. 1474 | if(self.status.video && !self.status.nativeVideoControls) { 1475 | self.internal.video.jq.css({'width':'0px', 'height':'0px'}); 1476 | } 1477 | if(self._validString(self.status.media.poster) && !self.status.nativeVideoControls) { 1478 | self.internal.poster.jq.show(); 1479 | } 1480 | if(self.css.jq.videoPlay.length) { 1481 | self.css.jq.videoPlay.show(); 1482 | } 1483 | self._error( { 1484 | type: $.jPlayer.error.URL, 1485 | context: self.status.src, // this.src shows absolute urls. Want context to show the url given. 1486 | message: $.jPlayer.errorMsg.URL, 1487 | hint: $.jPlayer.errorHint.URL 1488 | }); 1489 | } 1490 | } 1491 | }, false); 1492 | // Create all the other event listeners that bubble up to a jPlayer event from html, without being used by jPlayer. 1493 | $.each($.jPlayer.htmlEvent, function(i, eventType) { 1494 | mediaElement.addEventListener(this, function() { 1495 | if(entity.gate) { 1496 | self._trigger($.jPlayer.event[eventType]); 1497 | } 1498 | }, false); 1499 | }); 1500 | }, 1501 | _addAuroraEventListeners : function(player, entity) { 1502 | var self = this; 1503 | //player.preload = this.options.preload; 1504 | //player.muted = this.options.muted; 1505 | player.volume = this.options.volume * 100; 1506 | 1507 | // Create the event listeners 1508 | // Only want the active entity to affect jPlayer and bubble events. 1509 | // Using entity.gate so that object is referenced and gate property always current 1510 | 1511 | player.on("progress", function() { 1512 | if(entity.gate) { 1513 | if(self.internal.cmdsIgnored && this.readyState > 0) { // Detect iOS executed the command 1514 | self.internal.cmdsIgnored = false; 1515 | } 1516 | self._getAuroraStatus(player); 1517 | self._updateInterface(); 1518 | self._trigger($.jPlayer.event.progress); 1519 | // Progress with song duration, we estimate timeupdate need to be triggered too. 1520 | if (player.duration > 0) { 1521 | self._trigger($.jPlayer.event.timeupdate); 1522 | } 1523 | } 1524 | }, false); 1525 | player.on("ready", function() { 1526 | if(entity.gate) { 1527 | self._trigger($.jPlayer.event.loadeddata); 1528 | } 1529 | }, false); 1530 | player.on("duration", function() { 1531 | if(entity.gate) { 1532 | self._getAuroraStatus(player); 1533 | self._updateInterface(); 1534 | self._trigger($.jPlayer.event.durationchange); 1535 | } 1536 | }, false); 1537 | player.on("end", function() { 1538 | if(entity.gate) { 1539 | // Order of the next few commands are important. Change the time and then pause. 1540 | self._updateButtons(false); 1541 | self._getAuroraStatus(player, true); 1542 | self._updateInterface(); 1543 | self._trigger($.jPlayer.event.ended); 1544 | } 1545 | }, false); 1546 | player.on("error", function() { 1547 | if(entity.gate) { 1548 | self._updateButtons(false); 1549 | self._seeked(); 1550 | if(self.status.srcSet) { // Deals with case of clearMedia() causing an error event. 1551 | self.status.waitForLoad = true; // Allows the load operation to try again. 1552 | self.status.waitForPlay = true; // Reset since a play was captured. 1553 | if(self.status.video && !self.status.nativeVideoControls) { 1554 | self.internal.video.jq.css({'width':'0px', 'height':'0px'}); 1555 | } 1556 | if(self._validString(self.status.media.poster) && !self.status.nativeVideoControls) { 1557 | self.internal.poster.jq.show(); 1558 | } 1559 | if(self.css.jq.videoPlay.length) { 1560 | self.css.jq.videoPlay.show(); 1561 | } 1562 | self._error( { 1563 | type: $.jPlayer.error.URL, 1564 | context: self.status.src, // this.src shows absolute urls. Want context to show the url given. 1565 | message: $.jPlayer.errorMsg.URL, 1566 | hint: $.jPlayer.errorHint.URL 1567 | }); 1568 | } 1569 | } 1570 | }, false); 1571 | }, 1572 | _getHtmlStatus: function(media, override) { 1573 | var ct = 0, cpa = 0, sp = 0, cpr = 0; 1574 | 1575 | // Fixes the duration bug in iOS, where the durationchange event occurs when media.duration is not always correct. 1576 | // Fixes the initial duration bug in BB OS7, where the media.duration is infinity and displays as NaN:NaN due to Date() using inifity. 1577 | if(isFinite(media.duration)) { 1578 | this.status.duration = media.duration; 1579 | } 1580 | 1581 | ct = media.currentTime; 1582 | cpa = (this.status.duration > 0) ? 100 * ct / this.status.duration : 0; 1583 | if((typeof media.seekable === "object") && (media.seekable.length > 0)) { 1584 | sp = (this.status.duration > 0) ? 100 * media.seekable.end(media.seekable.length-1) / this.status.duration : 100; 1585 | cpr = (this.status.duration > 0) ? 100 * media.currentTime / media.seekable.end(media.seekable.length-1) : 0; // Duration conditional for iOS duration bug. ie., seekable.end is a NaN in that case. 1586 | } else { 1587 | sp = 100; 1588 | cpr = cpa; 1589 | } 1590 | 1591 | if(override) { 1592 | ct = 0; 1593 | cpr = 0; 1594 | cpa = 0; 1595 | } 1596 | 1597 | this.status.seekPercent = sp; 1598 | this.status.currentPercentRelative = cpr; 1599 | this.status.currentPercentAbsolute = cpa; 1600 | this.status.currentTime = ct; 1601 | 1602 | this.status.remaining = this.status.duration - this.status.currentTime; 1603 | 1604 | this.status.videoWidth = media.videoWidth; 1605 | this.status.videoHeight = media.videoHeight; 1606 | 1607 | this.status.readyState = media.readyState; 1608 | this.status.networkState = media.networkState; 1609 | this.status.playbackRate = media.playbackRate; 1610 | this.status.ended = media.ended; 1611 | }, 1612 | _getAuroraStatus: function(player, override) { 1613 | var ct = 0, cpa = 0, sp = 0, cpr = 0; 1614 | 1615 | this.status.duration = player.duration / 1000; 1616 | 1617 | ct = player.currentTime / 1000; 1618 | cpa = (this.status.duration > 0) ? 100 * ct / this.status.duration : 0; 1619 | if(player.buffered > 0) { 1620 | sp = (this.status.duration > 0) ? (player.buffered * this.status.duration) / this.status.duration : 100; 1621 | cpr = (this.status.duration > 0) ? ct / (player.buffered * this.status.duration) : 0; 1622 | } else { 1623 | sp = 100; 1624 | cpr = cpa; 1625 | } 1626 | 1627 | if(override) { 1628 | ct = 0; 1629 | cpr = 0; 1630 | cpa = 0; 1631 | } 1632 | 1633 | this.status.seekPercent = sp; 1634 | this.status.currentPercentRelative = cpr; 1635 | this.status.currentPercentAbsolute = cpa; 1636 | this.status.currentTime = ct; 1637 | 1638 | this.status.remaining = this.status.duration - this.status.currentTime; 1639 | 1640 | this.status.readyState = 4; // status.readyState; 1641 | this.status.networkState = 0; // status.networkState; 1642 | this.status.playbackRate = 1; // status.playbackRate; 1643 | this.status.ended = false; // status.ended; 1644 | }, 1645 | _resetStatus: function() { 1646 | this.status = $.extend({}, this.status, $.jPlayer.prototype.status); // Maintains the status properties that persist through a reset. 1647 | }, 1648 | _trigger: function(eventType, error, warning) { // eventType always valid as called using $.jPlayer.event.eventType 1649 | var event = $.Event(eventType); 1650 | event.jPlayer = {}; 1651 | event.jPlayer.version = $.extend({}, this.version); 1652 | event.jPlayer.options = $.extend(true, {}, this.options); // Deep copy 1653 | event.jPlayer.status = $.extend(true, {}, this.status); // Deep copy 1654 | event.jPlayer.html = $.extend(true, {}, this.html); // Deep copy 1655 | event.jPlayer.aurora = $.extend(true, {}, this.aurora); // Deep copy 1656 | event.jPlayer.flash = $.extend(true, {}, this.flash); // Deep copy 1657 | if(error) { 1658 | event.jPlayer.error = $.extend({}, error); 1659 | } 1660 | if(warning) { 1661 | event.jPlayer.warning = $.extend({}, warning); 1662 | } 1663 | this.element.trigger(event); 1664 | }, 1665 | jPlayerFlashEvent: function(eventType, status) { // Called from Flash 1666 | if(eventType === $.jPlayer.event.ready) { 1667 | if(!this.internal.ready) { 1668 | this.internal.ready = true; 1669 | this.internal.flash.jq.css({'width':'0px', 'height':'0px'}); // Once Flash generates the ready event, minimise to zero as it is not affected by wmode anymore. 1670 | 1671 | this.version.flash = status.version; 1672 | if(this.version.needFlash !== this.version.flash) { 1673 | this._error( { 1674 | type: $.jPlayer.error.VERSION, 1675 | context: this.version.flash, 1676 | message: $.jPlayer.errorMsg.VERSION + this.version.flash, 1677 | hint: $.jPlayer.errorHint.VERSION 1678 | }); 1679 | } 1680 | this._trigger($.jPlayer.event.repeat); // Trigger the repeat event so its handler can initialize itself with the loop option. 1681 | this._trigger(eventType); 1682 | } else { 1683 | // This condition occurs if the Flash is hidden and then shown again. 1684 | // Firefox also reloads the Flash if the CSS position changes. position:fixed is used for full screen. 1685 | 1686 | // Only do this if the Flash is the solution being used at the moment. Affects Media players where both solution may be being used. 1687 | if(this.flash.gate) { 1688 | 1689 | // Send the current status to the Flash now that it is ready (available) again. 1690 | if(this.status.srcSet) { 1691 | 1692 | // Need to read original status before issuing the setMedia command. 1693 | var currentTime = this.status.currentTime, 1694 | paused = this.status.paused; 1695 | 1696 | this.setMedia(this.status.media); 1697 | this.volumeWorker(this.options.volume); 1698 | if(currentTime > 0) { 1699 | if(paused) { 1700 | this.pause(currentTime); 1701 | } else { 1702 | this.play(currentTime); 1703 | } 1704 | } 1705 | } 1706 | this._trigger($.jPlayer.event.flashreset); 1707 | } 1708 | } 1709 | } 1710 | if(this.flash.gate) { 1711 | switch(eventType) { 1712 | case $.jPlayer.event.progress: 1713 | this._getFlashStatus(status); 1714 | this._updateInterface(); 1715 | this._trigger(eventType); 1716 | break; 1717 | case $.jPlayer.event.timeupdate: 1718 | this._getFlashStatus(status); 1719 | this._updateInterface(); 1720 | this._trigger(eventType); 1721 | break; 1722 | case $.jPlayer.event.play: 1723 | this._seeked(); 1724 | this._updateButtons(true); 1725 | this._trigger(eventType); 1726 | break; 1727 | case $.jPlayer.event.pause: 1728 | this._updateButtons(false); 1729 | this._trigger(eventType); 1730 | break; 1731 | case $.jPlayer.event.ended: 1732 | this._updateButtons(false); 1733 | this._trigger(eventType); 1734 | break; 1735 | case $.jPlayer.event.click: 1736 | this._trigger(eventType); // This could be dealt with by the default 1737 | break; 1738 | case $.jPlayer.event.error: 1739 | this.status.waitForLoad = true; // Allows the load operation to try again. 1740 | this.status.waitForPlay = true; // Reset since a play was captured. 1741 | if(this.status.video) { 1742 | this.internal.flash.jq.css({'width':'0px', 'height':'0px'}); 1743 | } 1744 | if(this._validString(this.status.media.poster)) { 1745 | this.internal.poster.jq.show(); 1746 | } 1747 | if(this.css.jq.videoPlay.length && this.status.video) { 1748 | this.css.jq.videoPlay.show(); 1749 | } 1750 | if(this.status.video) { // Set up for another try. Execute before error event. 1751 | this._flash_setVideo(this.status.media); 1752 | } else { 1753 | this._flash_setAudio(this.status.media); 1754 | } 1755 | this._updateButtons(false); 1756 | this._error( { 1757 | type: $.jPlayer.error.URL, 1758 | context:status.src, 1759 | message: $.jPlayer.errorMsg.URL, 1760 | hint: $.jPlayer.errorHint.URL 1761 | }); 1762 | break; 1763 | case $.jPlayer.event.seeking: 1764 | this._seeking(); 1765 | this._trigger(eventType); 1766 | break; 1767 | case $.jPlayer.event.seeked: 1768 | this._seeked(); 1769 | this._trigger(eventType); 1770 | break; 1771 | case $.jPlayer.event.ready: 1772 | // The ready event is handled outside the switch statement. 1773 | // Captured here otherwise 2 ready events would be generated if the ready event handler used setMedia. 1774 | break; 1775 | default: 1776 | this._trigger(eventType); 1777 | } 1778 | } 1779 | return false; 1780 | }, 1781 | _getFlashStatus: function(status) { 1782 | this.status.seekPercent = status.seekPercent; 1783 | this.status.currentPercentRelative = status.currentPercentRelative; 1784 | this.status.currentPercentAbsolute = status.currentPercentAbsolute; 1785 | this.status.currentTime = status.currentTime; 1786 | this.status.duration = status.duration; 1787 | this.status.remaining = status.duration - status.currentTime; 1788 | 1789 | this.status.videoWidth = status.videoWidth; 1790 | this.status.videoHeight = status.videoHeight; 1791 | 1792 | // The Flash does not generate this information in this release 1793 | this.status.readyState = 4; // status.readyState; 1794 | this.status.networkState = 0; // status.networkState; 1795 | this.status.playbackRate = 1; // status.playbackRate; 1796 | this.status.ended = false; // status.ended; 1797 | }, 1798 | _updateButtons: function(playing) { 1799 | if(playing === undefined) { 1800 | playing = !this.status.paused; 1801 | } else { 1802 | this.status.paused = !playing; 1803 | } 1804 | // Apply the state classes. (For the useStateClassSkin:true option) 1805 | if(playing) { 1806 | this.addStateClass('playing'); 1807 | } else { 1808 | this.removeStateClass('playing'); 1809 | } 1810 | if(!this.status.noFullWindow && this.options.fullWindow) { 1811 | this.addStateClass('fullScreen'); 1812 | } else { 1813 | this.removeStateClass('fullScreen'); 1814 | } 1815 | if(this.options.loop) { 1816 | this.addStateClass('looped'); 1817 | } else { 1818 | this.removeStateClass('looped'); 1819 | } 1820 | // Toggle the GUI element pairs. (For the useStateClassSkin:false option) 1821 | if(this.css.jq.play.length && this.css.jq.pause.length) { 1822 | if(playing) { 1823 | this.css.jq.play.hide(); 1824 | this.css.jq.pause.show(); 1825 | } else { 1826 | this.css.jq.play.show(); 1827 | this.css.jq.pause.hide(); 1828 | } 1829 | } 1830 | if(this.css.jq.restoreScreen.length && this.css.jq.fullScreen.length) { 1831 | if(this.status.noFullWindow) { 1832 | this.css.jq.fullScreen.hide(); 1833 | this.css.jq.restoreScreen.hide(); 1834 | } else if(this.options.fullWindow) { 1835 | this.css.jq.fullScreen.hide(); 1836 | this.css.jq.restoreScreen.show(); 1837 | } else { 1838 | this.css.jq.fullScreen.show(); 1839 | this.css.jq.restoreScreen.hide(); 1840 | } 1841 | } 1842 | if(this.css.jq.repeat.length && this.css.jq.repeatOff.length) { 1843 | if(this.options.loop) { 1844 | this.css.jq.repeat.hide(); 1845 | this.css.jq.repeatOff.show(); 1846 | } else { 1847 | this.css.jq.repeat.show(); 1848 | this.css.jq.repeatOff.hide(); 1849 | } 1850 | } 1851 | }, 1852 | _updateInterface: function() { 1853 | if(this.css.jq.seekBar.length) { 1854 | this.css.jq.seekBar.width(this.status.seekPercent+"%"); 1855 | } 1856 | if(this.css.jq.playBar.length) { 1857 | if(this.options.smoothPlayBar) { 1858 | this.css.jq.playBar.stop().animate({ 1859 | width: this.status.currentPercentAbsolute+"%" 1860 | }, 250, "linear"); 1861 | } else { 1862 | this.css.jq.playBar.width(this.status.currentPercentRelative+"%"); 1863 | } 1864 | } 1865 | var currentTimeText = ''; 1866 | if(this.css.jq.currentTime.length) { 1867 | currentTimeText = this._convertTime(this.status.currentTime); 1868 | if(currentTimeText !== this.css.jq.currentTime.text()) { 1869 | this.css.jq.currentTime.text(this._convertTime(this.status.currentTime)); 1870 | } 1871 | } 1872 | var durationText = '', 1873 | duration = this.status.duration, 1874 | remaining = this.status.remaining; 1875 | if(this.css.jq.duration.length) { 1876 | if(typeof this.status.media.duration === 'string') { 1877 | durationText = this.status.media.duration; 1878 | } else { 1879 | if(typeof this.status.media.duration === 'number') { 1880 | duration = this.status.media.duration; 1881 | remaining = duration - this.status.currentTime; 1882 | } 1883 | if(this.options.remainingDuration) { 1884 | durationText = (remaining > 0 ? '-' : '') + this._convertTime(remaining); 1885 | } else { 1886 | durationText = this._convertTime(duration); 1887 | } 1888 | } 1889 | if(durationText !== this.css.jq.duration.text()) { 1890 | this.css.jq.duration.text(durationText); 1891 | } 1892 | } 1893 | }, 1894 | _convertTime: ConvertTime.prototype.time, 1895 | _seeking: function() { 1896 | if(this.css.jq.seekBar.length) { 1897 | this.css.jq.seekBar.addClass("jp-seeking-bg"); 1898 | } 1899 | this.addStateClass('seeking'); 1900 | }, 1901 | _seeked: function() { 1902 | if(this.css.jq.seekBar.length) { 1903 | this.css.jq.seekBar.removeClass("jp-seeking-bg"); 1904 | } 1905 | this.removeStateClass('seeking'); 1906 | }, 1907 | _resetGate: function() { 1908 | this.html.audio.gate = false; 1909 | this.html.video.gate = false; 1910 | this.aurora.gate = false; 1911 | this.flash.gate = false; 1912 | }, 1913 | _resetActive: function() { 1914 | this.html.active = false; 1915 | this.aurora.active = false; 1916 | this.flash.active = false; 1917 | }, 1918 | _escapeHtml: function(s) { 1919 | return s.split('&').join('&').split('<').join('<').split('>').join('>').split('"').join('"'); 1920 | }, 1921 | _qualifyURL: function(url) { 1922 | var el = document.createElement('div'); 1923 | el.innerHTML= 'x'; 1924 | return el.firstChild.href; 1925 | }, 1926 | _absoluteMediaUrls: function(media) { 1927 | var self = this; 1928 | $.each(media, function(type, url) { 1929 | if(url && self.format[type] && url.substr(0, 5) !== "data:") { 1930 | media[type] = self._qualifyURL(url); 1931 | } 1932 | }); 1933 | return media; 1934 | }, 1935 | addStateClass: function(state) { 1936 | if(this.ancestorJq.length) { 1937 | this.ancestorJq.addClass(this.options.stateClass[state]); 1938 | } 1939 | }, 1940 | removeStateClass: function(state) { 1941 | if(this.ancestorJq.length) { 1942 | this.ancestorJq.removeClass(this.options.stateClass[state]); 1943 | } 1944 | }, 1945 | setMedia: function(media) { 1946 | 1947 | /* media[format] = String: URL of format. Must contain all of the supplied option's video or audio formats. 1948 | * media.poster = String: Video poster URL. 1949 | * media.track = Array: Of objects defining the track element: kind, src, srclang, label, def. 1950 | * media.stream = Boolean: * NOT IMPLEMENTED * Designating actual media streams. ie., "false/undefined" for files. Plan to refresh the flash every so often. 1951 | */ 1952 | 1953 | var self = this, 1954 | supported = false, 1955 | posterChanged = this.status.media.poster !== media.poster; // Compare before reset. Important for OSX Safari as this.htmlElement.poster.src is absolute, even if original poster URL was relative. 1956 | 1957 | this._resetMedia(); 1958 | this._resetGate(); 1959 | this._resetActive(); 1960 | 1961 | // Clear the Android Fix. 1962 | this.androidFix.setMedia = false; 1963 | this.androidFix.play = false; 1964 | this.androidFix.pause = false; 1965 | 1966 | // Convert all media URLs to absolute URLs. 1967 | media = this._absoluteMediaUrls(media); 1968 | 1969 | $.each(this.formats, function(formatPriority, format) { 1970 | var isVideo = self.format[format].media === 'video'; 1971 | $.each(self.solutions, function(solutionPriority, solution) { 1972 | if(self[solution].support[format] && self._validString(media[format])) { // Format supported in solution and url given for format. 1973 | var isHtml = solution === 'html'; 1974 | var isAurora = solution === 'aurora'; 1975 | 1976 | if(isVideo) { 1977 | if(isHtml) { 1978 | self.html.video.gate = true; 1979 | self._html_setVideo(media); 1980 | self.html.active = true; 1981 | } else { 1982 | self.flash.gate = true; 1983 | self._flash_setVideo(media); 1984 | self.flash.active = true; 1985 | } 1986 | if(self.css.jq.videoPlay.length) { 1987 | self.css.jq.videoPlay.show(); 1988 | } 1989 | self.status.video = true; 1990 | } else { 1991 | if(isHtml) { 1992 | self.html.audio.gate = true; 1993 | self._html_setAudio(media); 1994 | self.html.active = true; 1995 | 1996 | // Setup the Android Fix - Only for HTML audio. 1997 | if($.jPlayer.platform.android) { 1998 | self.androidFix.setMedia = true; 1999 | } 2000 | } else if(isAurora) { 2001 | self.aurora.gate = true; 2002 | self._aurora_setAudio(media); 2003 | self.aurora.active = true; 2004 | } else { 2005 | self.flash.gate = true; 2006 | self._flash_setAudio(media); 2007 | self.flash.active = true; 2008 | } 2009 | if(self.css.jq.videoPlay.length) { 2010 | self.css.jq.videoPlay.hide(); 2011 | } 2012 | self.status.video = false; 2013 | } 2014 | 2015 | supported = true; 2016 | return false; // Exit $.each 2017 | } 2018 | }); 2019 | if(supported) { 2020 | return false; // Exit $.each 2021 | } 2022 | }); 2023 | 2024 | if(supported) { 2025 | if(!(this.status.nativeVideoControls && this.html.video.gate)) { 2026 | // Set poster IMG if native video controls are not being used 2027 | // Note: With IE the IMG onload event occurs immediately when cached. 2028 | // Note: Poster hidden by default in _resetMedia() 2029 | if(this._validString(media.poster)) { 2030 | if(posterChanged) { // Since some browsers do not generate img onload event. 2031 | this.htmlElement.poster.src = media.poster; 2032 | } else { 2033 | this.internal.poster.jq.show(); 2034 | } 2035 | } 2036 | } 2037 | if(typeof media.title === 'string') { 2038 | if(this.css.jq.title.length) { 2039 | this.css.jq.title.html(media.title); 2040 | } 2041 | if(this.htmlElement.audio) { 2042 | this.htmlElement.audio.setAttribute('title', media.title); 2043 | } 2044 | if(this.htmlElement.video) { 2045 | this.htmlElement.video.setAttribute('title', media.title); 2046 | } 2047 | } 2048 | this.status.srcSet = true; 2049 | this.status.media = $.extend({}, media); 2050 | this._updateButtons(false); 2051 | this._updateInterface(); 2052 | this._trigger($.jPlayer.event.setmedia); 2053 | } else { // jPlayer cannot support any formats provided in this browser 2054 | // Send an error event 2055 | this._error( { 2056 | type: $.jPlayer.error.NO_SUPPORT, 2057 | context: "{supplied:'" + this.options.supplied + "'}", 2058 | message: $.jPlayer.errorMsg.NO_SUPPORT, 2059 | hint: $.jPlayer.errorHint.NO_SUPPORT 2060 | }); 2061 | } 2062 | }, 2063 | _resetMedia: function() { 2064 | this._resetStatus(); 2065 | this._updateButtons(false); 2066 | this._updateInterface(); 2067 | this._seeked(); 2068 | this.internal.poster.jq.hide(); 2069 | 2070 | clearTimeout(this.internal.htmlDlyCmdId); 2071 | 2072 | if(this.html.active) { 2073 | this._html_resetMedia(); 2074 | } else if(this.aurora.active) { 2075 | this._aurora_resetMedia(); 2076 | } else if(this.flash.active) { 2077 | this._flash_resetMedia(); 2078 | } 2079 | }, 2080 | clearMedia: function() { 2081 | this._resetMedia(); 2082 | 2083 | if(this.html.active) { 2084 | this._html_clearMedia(); 2085 | } else if(this.aurora.active) { 2086 | this._aurora_clearMedia(); 2087 | } else if(this.flash.active) { 2088 | this._flash_clearMedia(); 2089 | } 2090 | 2091 | this._resetGate(); 2092 | this._resetActive(); 2093 | }, 2094 | load: function() { 2095 | if(this.status.srcSet) { 2096 | if(this.html.active) { 2097 | this._html_load(); 2098 | } else if(this.aurora.active) { 2099 | this._aurora_load(); 2100 | } else if(this.flash.active) { 2101 | this._flash_load(); 2102 | } 2103 | } else { 2104 | this._urlNotSetError("load"); 2105 | } 2106 | }, 2107 | focus: function() { 2108 | if(this.options.keyEnabled) { 2109 | $.jPlayer.focus = this; 2110 | } 2111 | }, 2112 | play: function(time) { 2113 | var guiAction = typeof time === "object"; // Flags GUI click events so we know this was not a direct command, but an action taken by the user on the GUI. 2114 | if(guiAction && this.options.useStateClassSkin && !this.status.paused) { 2115 | this.pause(time); // The time would be the click event, but passing it over so info is not lost. 2116 | } else { 2117 | time = (typeof time === "number") ? time : NaN; // Remove jQuery event from click handler 2118 | if(this.status.srcSet) { 2119 | this.focus(); 2120 | if(this.html.active) { 2121 | this._html_play(time); 2122 | } else if(this.aurora.active) { 2123 | this._aurora_play(time); 2124 | } else if(this.flash.active) { 2125 | this._flash_play(time); 2126 | } 2127 | } else { 2128 | this._urlNotSetError("play"); 2129 | } 2130 | } 2131 | }, 2132 | videoPlay: function() { // Handles clicks on the play button over the video poster 2133 | this.play(); 2134 | }, 2135 | pause: function(time) { 2136 | time = (typeof time === "number") ? time : NaN; // Remove jQuery event from click handler 2137 | if(this.status.srcSet) { 2138 | if(this.html.active) { 2139 | this._html_pause(time); 2140 | } else if(this.aurora.active) { 2141 | this._aurora_pause(time); 2142 | } else if(this.flash.active) { 2143 | this._flash_pause(time); 2144 | } 2145 | } else { 2146 | this._urlNotSetError("pause"); 2147 | } 2148 | }, 2149 | tellOthers: function(command, conditions) { 2150 | var self = this, 2151 | hasConditions = typeof conditions === 'function', 2152 | args = Array.prototype.slice.call(arguments); // Convert arguments to an Array. 2153 | 2154 | if(typeof command !== 'string') { // Ignore, since no command. 2155 | return; // Return undefined to maintain chaining. 2156 | } 2157 | if(hasConditions) { 2158 | args.splice(1, 1); // Remove the conditions from the arguments 2159 | } 2160 | 2161 | $.jPlayer.prototype.destroyRemoved(); 2162 | $.each(this.instances, function() { 2163 | // Remember that "this" is the instance's "element" in the $.each() loop. 2164 | if(self.element !== this) { // Do not tell my instance. 2165 | if(!hasConditions || conditions.call(this.data("jPlayer"), self)) { 2166 | this.jPlayer.apply(this, args); 2167 | } 2168 | } 2169 | }); 2170 | }, 2171 | pauseOthers: function(time) { 2172 | this.tellOthers("pause", function() { 2173 | // In the conditions function, the "this" context is the other instance's jPlayer object. 2174 | return this.status.srcSet; 2175 | }, time); 2176 | }, 2177 | stop: function() { 2178 | if(this.status.srcSet) { 2179 | if(this.html.active) { 2180 | this._html_pause(0); 2181 | } else if(this.aurora.active) { 2182 | this._aurora_pause(0); 2183 | } else if(this.flash.active) { 2184 | this._flash_pause(0); 2185 | } 2186 | } else { 2187 | this._urlNotSetError("stop"); 2188 | } 2189 | }, 2190 | playHead: function(p) { 2191 | p = this._limitValue(p, 0, 100); 2192 | if(this.status.srcSet) { 2193 | if(this.html.active) { 2194 | this._html_playHead(p); 2195 | } else if(this.aurora.active) { 2196 | this._aurora_playHead(p); 2197 | } else if(this.flash.active) { 2198 | this._flash_playHead(p); 2199 | } 2200 | } else { 2201 | this._urlNotSetError("playHead"); 2202 | } 2203 | }, 2204 | _muted: function(muted) { 2205 | this.mutedWorker(muted); 2206 | if(this.options.globalVolume) { 2207 | this.tellOthers("mutedWorker", function() { 2208 | // Check the other instance has global volume enabled. 2209 | return this.options.globalVolume; 2210 | }, muted); 2211 | } 2212 | }, 2213 | mutedWorker: function(muted) { 2214 | this.options.muted = muted; 2215 | if(this.html.used) { 2216 | this._html_setProperty('muted', muted); 2217 | } 2218 | if(this.aurora.used) { 2219 | this._aurora_mute(muted); 2220 | } 2221 | if(this.flash.used) { 2222 | this._flash_mute(muted); 2223 | } 2224 | 2225 | // The HTML solution generates this event from the media element itself. 2226 | if(!this.html.video.gate && !this.html.audio.gate) { 2227 | this._updateMute(muted); 2228 | this._updateVolume(this.options.volume); 2229 | this._trigger($.jPlayer.event.volumechange); 2230 | } 2231 | }, 2232 | mute: function(mute) { // mute is either: undefined (true), an event object (true) or a boolean (muted). 2233 | var guiAction = typeof mute === "object"; // Flags GUI click events so we know this was not a direct command, but an action taken by the user on the GUI. 2234 | if(guiAction && this.options.useStateClassSkin && this.options.muted) { 2235 | this._muted(false); 2236 | } else { 2237 | mute = mute === undefined ? true : !!mute; 2238 | this._muted(mute); 2239 | } 2240 | }, 2241 | unmute: function(unmute) { // unmute is either: undefined (true), an event object (true) or a boolean (!muted). 2242 | unmute = unmute === undefined ? true : !!unmute; 2243 | this._muted(!unmute); 2244 | }, 2245 | _updateMute: function(mute) { 2246 | if(mute === undefined) { 2247 | mute = this.options.muted; 2248 | } 2249 | if(mute) { 2250 | this.addStateClass('muted'); 2251 | } else { 2252 | this.removeStateClass('muted'); 2253 | } 2254 | if(this.css.jq.mute.length && this.css.jq.unmute.length) { 2255 | if(this.status.noVolume) { 2256 | this.css.jq.mute.hide(); 2257 | this.css.jq.unmute.hide(); 2258 | } else if(mute) { 2259 | this.css.jq.mute.hide(); 2260 | this.css.jq.unmute.show(); 2261 | } else { 2262 | this.css.jq.mute.show(); 2263 | this.css.jq.unmute.hide(); 2264 | } 2265 | } 2266 | }, 2267 | volume: function(v) { 2268 | this.volumeWorker(v); 2269 | if(this.options.globalVolume) { 2270 | this.tellOthers("volumeWorker", function() { 2271 | // Check the other instance has global volume enabled. 2272 | return this.options.globalVolume; 2273 | }, v); 2274 | } 2275 | }, 2276 | volumeWorker: function(v) { 2277 | v = this._limitValue(v, 0, 1); 2278 | this.options.volume = v; 2279 | 2280 | if(this.html.used) { 2281 | this._html_setProperty('volume', v); 2282 | } 2283 | if(this.aurora.used) { 2284 | this._aurora_volume(v); 2285 | } 2286 | if(this.flash.used) { 2287 | this._flash_volume(v); 2288 | } 2289 | 2290 | // The HTML solution generates this event from the media element itself. 2291 | if(!this.html.video.gate && !this.html.audio.gate) { 2292 | this._updateVolume(v); 2293 | this._trigger($.jPlayer.event.volumechange); 2294 | } 2295 | }, 2296 | volumeBar: function(e) { // Handles clicks on the volumeBar 2297 | if(this.css.jq.volumeBar.length) { 2298 | // Using $(e.currentTarget) to enable multiple volume bars 2299 | var $bar = $(e.currentTarget), 2300 | offset = $bar.offset(), 2301 | x = e.pageX - offset.left, 2302 | w = $bar.width(), 2303 | y = $bar.height() - e.pageY + offset.top, 2304 | h = $bar.height(); 2305 | if(this.options.verticalVolume) { 2306 | this.volume(y/h); 2307 | } else { 2308 | this.volume(x/w); 2309 | } 2310 | } 2311 | if(this.options.muted) { 2312 | this._muted(false); 2313 | } 2314 | }, 2315 | _updateVolume: function(v) { 2316 | if(v === undefined) { 2317 | v = this.options.volume; 2318 | } 2319 | v = this.options.muted ? 0 : v; 2320 | 2321 | if(this.status.noVolume) { 2322 | this.addStateClass('noVolume'); 2323 | if(this.css.jq.volumeBar.length) { 2324 | this.css.jq.volumeBar.hide(); 2325 | } 2326 | if(this.css.jq.volumeBarValue.length) { 2327 | this.css.jq.volumeBarValue.hide(); 2328 | } 2329 | if(this.css.jq.volumeMax.length) { 2330 | this.css.jq.volumeMax.hide(); 2331 | } 2332 | } else { 2333 | this.removeStateClass('noVolume'); 2334 | if(this.css.jq.volumeBar.length) { 2335 | this.css.jq.volumeBar.show(); 2336 | } 2337 | if(this.css.jq.volumeBarValue.length) { 2338 | this.css.jq.volumeBarValue.show(); 2339 | this.css.jq.volumeBarValue[this.options.verticalVolume ? "height" : "width"]((v*100)+"%"); 2340 | } 2341 | if(this.css.jq.volumeMax.length) { 2342 | this.css.jq.volumeMax.show(); 2343 | } 2344 | } 2345 | }, 2346 | volumeMax: function() { // Handles clicks on the volume max 2347 | this.volume(1); 2348 | if(this.options.muted) { 2349 | this._muted(false); 2350 | } 2351 | }, 2352 | _cssSelectorAncestor: function(ancestor) { 2353 | var self = this; 2354 | this.options.cssSelectorAncestor = ancestor; 2355 | this._removeUiClass(); 2356 | this.ancestorJq = ancestor ? $(ancestor) : []; // Would use $() instead of [], but it is only 1.4+ 2357 | if(ancestor && this.ancestorJq.length !== 1) { // So empty strings do not generate the warning. 2358 | this._warning( { 2359 | type: $.jPlayer.warning.CSS_SELECTOR_COUNT, 2360 | context: ancestor, 2361 | message: $.jPlayer.warningMsg.CSS_SELECTOR_COUNT + this.ancestorJq.length + " found for cssSelectorAncestor.", 2362 | hint: $.jPlayer.warningHint.CSS_SELECTOR_COUNT 2363 | }); 2364 | } 2365 | this._addUiClass(); 2366 | $.each(this.options.cssSelector, function(fn, cssSel) { 2367 | self._cssSelector(fn, cssSel); 2368 | }); 2369 | 2370 | // Set the GUI to the current state. 2371 | this._updateInterface(); 2372 | this._updateButtons(); 2373 | this._updateAutohide(); 2374 | this._updateVolume(); 2375 | this._updateMute(); 2376 | }, 2377 | _cssSelector: function(fn, cssSel) { 2378 | var self = this; 2379 | if(typeof cssSel === 'string') { 2380 | if($.jPlayer.prototype.options.cssSelector[fn]) { 2381 | if(this.css.jq[fn] && this.css.jq[fn].length) { 2382 | this.css.jq[fn].unbind(".jPlayer"); 2383 | } 2384 | this.options.cssSelector[fn] = cssSel; 2385 | this.css.cs[fn] = this.options.cssSelectorAncestor + " " + cssSel; 2386 | 2387 | if(cssSel) { // Checks for empty string 2388 | this.css.jq[fn] = $(this.css.cs[fn]); 2389 | } else { 2390 | this.css.jq[fn] = []; // To comply with the css.jq[fn].length check before its use. As of jQuery 1.4 could have used $() for an empty set. 2391 | } 2392 | 2393 | if(this.css.jq[fn].length && this[fn]) { 2394 | var handler = function(e) { 2395 | e.preventDefault(); 2396 | self[fn](e); 2397 | if(self.options.autoBlur) { 2398 | $(this).blur(); 2399 | } else { 2400 | $(this).focus(); // Force focus for ARIA. 2401 | } 2402 | }; 2403 | this.css.jq[fn].bind("click.jPlayer", handler); // Using jPlayer namespace 2404 | } 2405 | 2406 | if(cssSel && this.css.jq[fn].length !== 1) { // So empty strings do not generate the warning. ie., they just remove the old one. 2407 | this._warning( { 2408 | type: $.jPlayer.warning.CSS_SELECTOR_COUNT, 2409 | context: this.css.cs[fn], 2410 | message: $.jPlayer.warningMsg.CSS_SELECTOR_COUNT + this.css.jq[fn].length + " found for " + fn + " method.", 2411 | hint: $.jPlayer.warningHint.CSS_SELECTOR_COUNT 2412 | }); 2413 | } 2414 | } else { 2415 | this._warning( { 2416 | type: $.jPlayer.warning.CSS_SELECTOR_METHOD, 2417 | context: fn, 2418 | message: $.jPlayer.warningMsg.CSS_SELECTOR_METHOD, 2419 | hint: $.jPlayer.warningHint.CSS_SELECTOR_METHOD 2420 | }); 2421 | } 2422 | } else { 2423 | this._warning( { 2424 | type: $.jPlayer.warning.CSS_SELECTOR_STRING, 2425 | context: cssSel, 2426 | message: $.jPlayer.warningMsg.CSS_SELECTOR_STRING, 2427 | hint: $.jPlayer.warningHint.CSS_SELECTOR_STRING 2428 | }); 2429 | } 2430 | }, 2431 | duration: function(e) { 2432 | if(this.options.toggleDuration) { 2433 | if(this.options.captureDuration) { 2434 | e.stopPropagation(); 2435 | } 2436 | this._setOption("remainingDuration", !this.options.remainingDuration); 2437 | } 2438 | }, 2439 | seekBar: function(e) { // Handles clicks on the seekBar 2440 | if(this.css.jq.seekBar.length) { 2441 | // Using $(e.currentTarget) to enable multiple seek bars 2442 | var $bar = $(e.currentTarget), 2443 | offset = $bar.offset(), 2444 | x = e.pageX - offset.left, 2445 | w = $bar.width(), 2446 | p = 100 * x / w; 2447 | this.playHead(p); 2448 | } 2449 | }, 2450 | playbackRate: function(pbr) { 2451 | this._setOption("playbackRate", pbr); 2452 | }, 2453 | playbackRateBar: function(e) { // Handles clicks on the playbackRateBar 2454 | if(this.css.jq.playbackRateBar.length) { 2455 | // Using $(e.currentTarget) to enable multiple playbackRate bars 2456 | var $bar = $(e.currentTarget), 2457 | offset = $bar.offset(), 2458 | x = e.pageX - offset.left, 2459 | w = $bar.width(), 2460 | y = $bar.height() - e.pageY + offset.top, 2461 | h = $bar.height(), 2462 | ratio, pbr; 2463 | if(this.options.verticalPlaybackRate) { 2464 | ratio = y/h; 2465 | } else { 2466 | ratio = x/w; 2467 | } 2468 | pbr = ratio * (this.options.maxPlaybackRate - this.options.minPlaybackRate) + this.options.minPlaybackRate; 2469 | this.playbackRate(pbr); 2470 | } 2471 | }, 2472 | _updatePlaybackRate: function() { 2473 | var pbr = this.options.playbackRate, 2474 | ratio = (pbr - this.options.minPlaybackRate) / (this.options.maxPlaybackRate - this.options.minPlaybackRate); 2475 | if(this.status.playbackRateEnabled) { 2476 | if(this.css.jq.playbackRateBar.length) { 2477 | this.css.jq.playbackRateBar.show(); 2478 | } 2479 | if(this.css.jq.playbackRateBarValue.length) { 2480 | this.css.jq.playbackRateBarValue.show(); 2481 | this.css.jq.playbackRateBarValue[this.options.verticalPlaybackRate ? "height" : "width"]((ratio*100)+"%"); 2482 | } 2483 | } else { 2484 | if(this.css.jq.playbackRateBar.length) { 2485 | this.css.jq.playbackRateBar.hide(); 2486 | } 2487 | if(this.css.jq.playbackRateBarValue.length) { 2488 | this.css.jq.playbackRateBarValue.hide(); 2489 | } 2490 | } 2491 | }, 2492 | repeat: function(event) { // Handle clicks on the repeat button 2493 | var guiAction = typeof event === "object"; // Flags GUI click events so we know this was not a direct command, but an action taken by the user on the GUI. 2494 | if(guiAction && this.options.useStateClassSkin && this.options.loop) { 2495 | this._loop(false); 2496 | } else { 2497 | this._loop(true); 2498 | } 2499 | }, 2500 | repeatOff: function() { // Handle clicks on the repeatOff button 2501 | this._loop(false); 2502 | }, 2503 | _loop: function(loop) { 2504 | if(this.options.loop !== loop) { 2505 | this.options.loop = loop; 2506 | this._updateButtons(); 2507 | this._trigger($.jPlayer.event.repeat); 2508 | } 2509 | }, 2510 | 2511 | // Options code adapted from ui.widget.js (1.8.7). Made changes so the key can use dot notation. To match previous getData solution in jPlayer 1. 2512 | option: function(key, value) { 2513 | var options = key; 2514 | 2515 | // Enables use: options(). Returns a copy of options object 2516 | if ( arguments.length === 0 ) { 2517 | return $.extend( true, {}, this.options ); 2518 | } 2519 | 2520 | if(typeof key === "string") { 2521 | var keys = key.split("."); 2522 | 2523 | // Enables use: options("someOption") Returns a copy of the option. Supports dot notation. 2524 | if(value === undefined) { 2525 | 2526 | var opt = $.extend(true, {}, this.options); 2527 | for(var i = 0; i < keys.length; i++) { 2528 | if(opt[keys[i]] !== undefined) { 2529 | opt = opt[keys[i]]; 2530 | } else { 2531 | this._warning( { 2532 | type: $.jPlayer.warning.OPTION_KEY, 2533 | context: key, 2534 | message: $.jPlayer.warningMsg.OPTION_KEY, 2535 | hint: $.jPlayer.warningHint.OPTION_KEY 2536 | }); 2537 | return undefined; 2538 | } 2539 | } 2540 | return opt; 2541 | } 2542 | 2543 | // Enables use: options("someOptionObject", someObject}). Creates: {someOptionObject:someObject} 2544 | // Enables use: options("someOption", someValue). Creates: {someOption:someValue} 2545 | // Enables use: options("someOptionObject.someOption", someValue). Creates: {someOptionObject:{someOption:someValue}} 2546 | 2547 | options = {}; 2548 | var opts = options; 2549 | 2550 | for(var j = 0; j < keys.length; j++) { 2551 | if(j < keys.length - 1) { 2552 | opts[keys[j]] = {}; 2553 | opts = opts[keys[j]]; 2554 | } else { 2555 | opts[keys[j]] = value; 2556 | } 2557 | } 2558 | } 2559 | 2560 | // Otherwise enables use: options(optionObject). Uses original object (the key) 2561 | 2562 | this._setOptions(options); 2563 | 2564 | return this; 2565 | }, 2566 | _setOptions: function(options) { 2567 | var self = this; 2568 | $.each(options, function(key, value) { // This supports the 2 level depth that the options of jPlayer has. Would review if we ever need more depth. 2569 | self._setOption(key, value); 2570 | }); 2571 | 2572 | return this; 2573 | }, 2574 | _setOption: function(key, value) { 2575 | var self = this; 2576 | 2577 | // The ability to set options is limited at this time. 2578 | 2579 | switch(key) { 2580 | case "volume" : 2581 | this.volume(value); 2582 | break; 2583 | case "muted" : 2584 | this._muted(value); 2585 | break; 2586 | case "globalVolume" : 2587 | this.options[key] = value; 2588 | break; 2589 | case "cssSelectorAncestor" : 2590 | this._cssSelectorAncestor(value); // Set and refresh all associations for the new ancestor. 2591 | break; 2592 | case "cssSelector" : 2593 | $.each(value, function(fn, cssSel) { 2594 | self._cssSelector(fn, cssSel); // NB: The option is set inside this function, after further validity checks. 2595 | }); 2596 | break; 2597 | case "playbackRate" : 2598 | this.options[key] = value = this._limitValue(value, this.options.minPlaybackRate, this.options.maxPlaybackRate); 2599 | if(this.html.used) { 2600 | this._html_setProperty('playbackRate', value); 2601 | } 2602 | this._updatePlaybackRate(); 2603 | break; 2604 | case "defaultPlaybackRate" : 2605 | this.options[key] = value = this._limitValue(value, this.options.minPlaybackRate, this.options.maxPlaybackRate); 2606 | if(this.html.used) { 2607 | this._html_setProperty('defaultPlaybackRate', value); 2608 | } 2609 | this._updatePlaybackRate(); 2610 | break; 2611 | case "minPlaybackRate" : 2612 | this.options[key] = value = this._limitValue(value, 0.1, this.options.maxPlaybackRate - 0.1); 2613 | this._updatePlaybackRate(); 2614 | break; 2615 | case "maxPlaybackRate" : 2616 | this.options[key] = value = this._limitValue(value, this.options.minPlaybackRate + 0.1, 16); 2617 | this._updatePlaybackRate(); 2618 | break; 2619 | case "fullScreen" : 2620 | if(this.options[key] !== value) { // if changed 2621 | var wkv = $.jPlayer.nativeFeatures.fullscreen.used.webkitVideo; 2622 | if(!wkv || wkv && !this.status.waitForPlay) { 2623 | if(!wkv) { // No sensible way to unset option on these devices. 2624 | this.options[key] = value; 2625 | } 2626 | if(value) { 2627 | this._requestFullscreen(); 2628 | } else { 2629 | this._exitFullscreen(); 2630 | } 2631 | if(!wkv) { 2632 | this._setOption("fullWindow", value); 2633 | } 2634 | } 2635 | } 2636 | break; 2637 | case "fullWindow" : 2638 | if(this.options[key] !== value) { // if changed 2639 | this._removeUiClass(); 2640 | this.options[key] = value; 2641 | this._refreshSize(); 2642 | } 2643 | break; 2644 | case "size" : 2645 | if(!this.options.fullWindow && this.options[key].cssClass !== value.cssClass) { 2646 | this._removeUiClass(); 2647 | } 2648 | this.options[key] = $.extend({}, this.options[key], value); // store a merged copy of it, incase not all properties changed. 2649 | this._refreshSize(); 2650 | break; 2651 | case "sizeFull" : 2652 | if(this.options.fullWindow && this.options[key].cssClass !== value.cssClass) { 2653 | this._removeUiClass(); 2654 | } 2655 | this.options[key] = $.extend({}, this.options[key], value); // store a merged copy of it, incase not all properties changed. 2656 | this._refreshSize(); 2657 | break; 2658 | case "autohide" : 2659 | this.options[key] = $.extend({}, this.options[key], value); // store a merged copy of it, incase not all properties changed. 2660 | this._updateAutohide(); 2661 | break; 2662 | case "loop" : 2663 | this._loop(value); 2664 | break; 2665 | case "remainingDuration" : 2666 | this.options[key] = value; 2667 | this._updateInterface(); 2668 | break; 2669 | case "toggleDuration" : 2670 | this.options[key] = value; 2671 | break; 2672 | case "nativeVideoControls" : 2673 | this.options[key] = $.extend({}, this.options[key], value); // store a merged copy of it, incase not all properties changed. 2674 | this.status.nativeVideoControls = this._uaBlocklist(this.options.nativeVideoControls); 2675 | this._restrictNativeVideoControls(); 2676 | this._updateNativeVideoControls(); 2677 | break; 2678 | case "noFullWindow" : 2679 | this.options[key] = $.extend({}, this.options[key], value); // store a merged copy of it, incase not all properties changed. 2680 | this.status.nativeVideoControls = this._uaBlocklist(this.options.nativeVideoControls); // Need to check again as noFullWindow can depend on this flag and the restrict() can override it. 2681 | this.status.noFullWindow = this._uaBlocklist(this.options.noFullWindow); 2682 | this._restrictNativeVideoControls(); 2683 | this._updateButtons(); 2684 | break; 2685 | case "noVolume" : 2686 | this.options[key] = $.extend({}, this.options[key], value); // store a merged copy of it, incase not all properties changed. 2687 | this.status.noVolume = this._uaBlocklist(this.options.noVolume); 2688 | this._updateVolume(); 2689 | this._updateMute(); 2690 | break; 2691 | case "emulateHtml" : 2692 | if(this.options[key] !== value) { // To avoid multiple event handlers being created, if true already. 2693 | this.options[key] = value; 2694 | if(value) { 2695 | this._emulateHtmlBridge(); 2696 | } else { 2697 | this._destroyHtmlBridge(); 2698 | } 2699 | } 2700 | break; 2701 | case "timeFormat" : 2702 | this.options[key] = $.extend({}, this.options[key], value); // store a merged copy of it, incase not all properties changed. 2703 | break; 2704 | case "keyEnabled" : 2705 | this.options[key] = value; 2706 | if(!value && this === $.jPlayer.focus) { 2707 | $.jPlayer.focus = null; 2708 | } 2709 | break; 2710 | case "keyBindings" : 2711 | this.options[key] = $.extend(true, {}, this.options[key], value); // store a merged DEEP copy of it, incase not all properties changed. 2712 | break; 2713 | case "audioFullScreen" : 2714 | this.options[key] = value; 2715 | break; 2716 | case "autoBlur" : 2717 | this.options[key] = value; 2718 | break; 2719 | } 2720 | 2721 | return this; 2722 | }, 2723 | // End of: (Options code adapted from ui.widget.js) 2724 | 2725 | _refreshSize: function() { 2726 | this._setSize(); // update status and jPlayer element size 2727 | this._addUiClass(); // update the ui class 2728 | this._updateSize(); // update internal sizes 2729 | this._updateButtons(); 2730 | this._updateAutohide(); 2731 | this._trigger($.jPlayer.event.resize); 2732 | }, 2733 | _setSize: function() { 2734 | // Determine the current size from the options 2735 | if(this.options.fullWindow) { 2736 | this.status.width = this.options.sizeFull.width; 2737 | this.status.height = this.options.sizeFull.height; 2738 | this.status.cssClass = this.options.sizeFull.cssClass; 2739 | } else { 2740 | this.status.width = this.options.size.width; 2741 | this.status.height = this.options.size.height; 2742 | this.status.cssClass = this.options.size.cssClass; 2743 | } 2744 | 2745 | // Set the size of the jPlayer area. 2746 | this.element.css({'width': this.status.width, 'height': this.status.height}); 2747 | }, 2748 | _addUiClass: function() { 2749 | if(this.ancestorJq.length) { 2750 | this.ancestorJq.addClass(this.status.cssClass); 2751 | } 2752 | }, 2753 | _removeUiClass: function() { 2754 | if(this.ancestorJq.length) { 2755 | this.ancestorJq.removeClass(this.status.cssClass); 2756 | } 2757 | }, 2758 | _updateSize: function() { 2759 | // The poster uses show/hide so can simply resize it. 2760 | this.internal.poster.jq.css({'width': this.status.width, 'height': this.status.height}); 2761 | 2762 | // Video html or flash resized if necessary at this time, or if native video controls being used. 2763 | if(!this.status.waitForPlay && this.html.active && this.status.video || this.html.video.available && this.html.used && this.status.nativeVideoControls) { 2764 | this.internal.video.jq.css({'width': this.status.width, 'height': this.status.height}); 2765 | } 2766 | else if(!this.status.waitForPlay && this.flash.active && this.status.video) { 2767 | this.internal.flash.jq.css({'width': this.status.width, 'height': this.status.height}); 2768 | } 2769 | }, 2770 | _updateAutohide: function() { 2771 | var self = this, 2772 | event = "mousemove.jPlayer", 2773 | namespace = ".jPlayerAutohide", 2774 | eventType = event + namespace, 2775 | handler = function(event) { 2776 | var moved = false, 2777 | deltaX, deltaY; 2778 | if(typeof self.internal.mouse !== "undefined") { 2779 | //get the change from last position to this position 2780 | deltaX = self.internal.mouse.x - event.pageX; 2781 | deltaY = self.internal.mouse.y - event.pageY; 2782 | moved = (Math.floor(deltaX) > 0) || (Math.floor(deltaY)>0); 2783 | } else { 2784 | moved = true; 2785 | } 2786 | // store current position for next method execution 2787 | self.internal.mouse = { 2788 | x : event.pageX, 2789 | y : event.pageY 2790 | }; 2791 | // if mouse has been actually moved, do the gui fadeIn/fadeOut 2792 | if (moved) { 2793 | self.css.jq.gui.fadeIn(self.options.autohide.fadeIn, function() { 2794 | clearTimeout(self.internal.autohideId); 2795 | self.internal.autohideId = setTimeout( function() { 2796 | self.css.jq.gui.fadeOut(self.options.autohide.fadeOut); 2797 | }, self.options.autohide.hold); 2798 | }); 2799 | } 2800 | }; 2801 | 2802 | if(this.css.jq.gui.length) { 2803 | 2804 | // End animations first so that its callback is executed now. 2805 | // Otherwise an in progress fadeIn animation still has the callback to fadeOut again. 2806 | this.css.jq.gui.stop(true, true); 2807 | 2808 | // Removes the fadeOut operation from the fadeIn callback. 2809 | clearTimeout(this.internal.autohideId); 2810 | // undefine mouse 2811 | delete this.internal.mouse; 2812 | 2813 | this.element.unbind(namespace); 2814 | this.css.jq.gui.unbind(namespace); 2815 | 2816 | if(!this.status.nativeVideoControls) { 2817 | if(this.options.fullWindow && this.options.autohide.full || !this.options.fullWindow && this.options.autohide.restored) { 2818 | this.element.bind(eventType, handler); 2819 | this.css.jq.gui.bind(eventType, handler); 2820 | this.css.jq.gui.hide(); 2821 | } else { 2822 | this.css.jq.gui.show(); 2823 | } 2824 | } else { 2825 | this.css.jq.gui.hide(); 2826 | } 2827 | } 2828 | }, 2829 | fullScreen: function(event) { 2830 | var guiAction = typeof event === "object"; // Flags GUI click events so we know this was not a direct command, but an action taken by the user on the GUI. 2831 | if(guiAction && this.options.useStateClassSkin && this.options.fullScreen) { 2832 | this._setOption("fullScreen", false); 2833 | } else { 2834 | this._setOption("fullScreen", true); 2835 | } 2836 | }, 2837 | restoreScreen: function() { 2838 | this._setOption("fullScreen", false); 2839 | }, 2840 | _fullscreenAddEventListeners: function() { 2841 | var self = this, 2842 | fs = $.jPlayer.nativeFeatures.fullscreen; 2843 | 2844 | if(fs.api.fullscreenEnabled) { 2845 | if(fs.event.fullscreenchange) { 2846 | // Create the event handler function and store it for removal. 2847 | if(typeof this.internal.fullscreenchangeHandler !== 'function') { 2848 | this.internal.fullscreenchangeHandler = function() { 2849 | self._fullscreenchange(); 2850 | }; 2851 | } 2852 | document.addEventListener(fs.event.fullscreenchange, this.internal.fullscreenchangeHandler, false); 2853 | } 2854 | // No point creating handler for fullscreenerror. 2855 | // Either logic avoids fullscreen occurring (w3c/moz), or their is no event on the browser (webkit). 2856 | } 2857 | }, 2858 | _fullscreenRemoveEventListeners: function() { 2859 | var fs = $.jPlayer.nativeFeatures.fullscreen; 2860 | if(this.internal.fullscreenchangeHandler) { 2861 | document.removeEventListener(fs.event.fullscreenchange, this.internal.fullscreenchangeHandler, false); 2862 | } 2863 | }, 2864 | _fullscreenchange: function() { 2865 | // If nothing is fullscreen, then we cannot be in fullscreen mode. 2866 | if(this.options.fullScreen && !$.jPlayer.nativeFeatures.fullscreen.api.fullscreenElement()) { 2867 | this._setOption("fullScreen", false); 2868 | } 2869 | }, 2870 | _requestFullscreen: function() { 2871 | // Either the container or the jPlayer div 2872 | var e = this.ancestorJq.length ? this.ancestorJq[0] : this.element[0], 2873 | fs = $.jPlayer.nativeFeatures.fullscreen; 2874 | 2875 | // This method needs the video element. For iOS and Android. 2876 | if(fs.used.webkitVideo) { 2877 | e = this.htmlElement.video; 2878 | } 2879 | 2880 | if(fs.api.fullscreenEnabled) { 2881 | fs.api.requestFullscreen(e); 2882 | } 2883 | }, 2884 | _exitFullscreen: function() { 2885 | 2886 | var fs = $.jPlayer.nativeFeatures.fullscreen, 2887 | e; 2888 | 2889 | // This method needs the video element. For iOS and Android. 2890 | if(fs.used.webkitVideo) { 2891 | e = this.htmlElement.video; 2892 | } 2893 | 2894 | if(fs.api.fullscreenEnabled) { 2895 | fs.api.exitFullscreen(e); 2896 | } 2897 | }, 2898 | _html_initMedia: function(media) { 2899 | // Remove any existing track elements 2900 | var $media = $(this.htmlElement.media).empty(); 2901 | 2902 | // Create any track elements given with the media, as an Array of track Objects. 2903 | $.each(media.track || [], function(i,v) { 2904 | var track = document.createElement('track'); 2905 | track.setAttribute("kind", v.kind ? v.kind : ""); 2906 | track.setAttribute("src", v.src ? v.src : ""); 2907 | track.setAttribute("srclang", v.srclang ? v.srclang : ""); 2908 | track.setAttribute("label", v.label ? v.label : ""); 2909 | if(v.def) { 2910 | track.setAttribute("default", v.def); 2911 | } 2912 | $media.append(track); 2913 | }); 2914 | 2915 | this.htmlElement.media.src = this.status.src; 2916 | 2917 | if(this.options.preload !== 'none') { 2918 | this._html_load(); // See function for comments 2919 | } 2920 | this._trigger($.jPlayer.event.timeupdate); // The flash generates this event for its solution. 2921 | }, 2922 | _html_setFormat: function(media) { 2923 | var self = this; 2924 | // Always finds a format due to checks in setMedia() 2925 | $.each(this.formats, function(priority, format) { 2926 | if(self.html.support[format] && media[format]) { 2927 | self.status.src = media[format]; 2928 | self.status.format[format] = true; 2929 | self.status.formatType = format; 2930 | return false; 2931 | } 2932 | }); 2933 | }, 2934 | _html_setAudio: function(media) { 2935 | this._html_setFormat(media); 2936 | this.htmlElement.media = this.htmlElement.audio; 2937 | this._html_initMedia(media); 2938 | }, 2939 | _html_setVideo: function(media) { 2940 | this._html_setFormat(media); 2941 | if(this.status.nativeVideoControls) { 2942 | this.htmlElement.video.poster = this._validString(media.poster) ? media.poster : ""; 2943 | } 2944 | this.htmlElement.media = this.htmlElement.video; 2945 | this._html_initMedia(media); 2946 | }, 2947 | _html_resetMedia: function() { 2948 | if(this.htmlElement.media) { 2949 | if(this.htmlElement.media.id === this.internal.video.id && !this.status.nativeVideoControls) { 2950 | this.internal.video.jq.css({'width':'0px', 'height':'0px'}); 2951 | } 2952 | this.htmlElement.media.pause(); 2953 | } 2954 | }, 2955 | _html_clearMedia: function() { 2956 | if(this.htmlElement.media) { 2957 | this.htmlElement.media.src = "about:blank"; 2958 | // The following load() is only required for Firefox 3.6 (PowerMacs). 2959 | // Recent HTMl5 browsers only require the src change. Due to changes in W3C spec and load() effect. 2960 | this.htmlElement.media.load(); // Stops an old, "in progress" download from continuing the download. Triggers the loadstart, error and emptied events, due to the empty src. Also an abort event if a download was in progress. 2961 | } 2962 | }, 2963 | _html_load: function() { 2964 | // This function remains to allow the early HTML5 browsers to work, such as Firefox 3.6 2965 | // A change in the W3C spec for the media.load() command means that this is no longer necessary. 2966 | // This command should be removed and actually causes minor undesirable effects on some browsers. Such as loading the whole file and not only the metadata. 2967 | if(this.status.waitForLoad) { 2968 | this.status.waitForLoad = false; 2969 | this.htmlElement.media.load(); 2970 | } 2971 | clearTimeout(this.internal.htmlDlyCmdId); 2972 | }, 2973 | _html_play: function(time) { 2974 | var self = this, 2975 | media = this.htmlElement.media; 2976 | 2977 | this.androidFix.pause = false; // Cancel the pause fix. 2978 | 2979 | this._html_load(); // Loads if required and clears any delayed commands. 2980 | 2981 | // Setup the Android Fix. 2982 | if(this.androidFix.setMedia) { 2983 | this.androidFix.play = true; 2984 | this.androidFix.time = time; 2985 | 2986 | } else if(!isNaN(time)) { 2987 | 2988 | // Attempt to play it, since iOS has been ignoring commands 2989 | if(this.internal.cmdsIgnored) { 2990 | media.play(); 2991 | } 2992 | 2993 | try { 2994 | // !media.seekable is for old HTML5 browsers, like Firefox 3.6. 2995 | // Checking seekable.length is important for iOS6 to work with setMedia().play(time) 2996 | if(!media.seekable || typeof media.seekable === "object" && media.seekable.length > 0) { 2997 | media.currentTime = time; 2998 | media.play(); 2999 | } else { 3000 | throw 1; 3001 | } 3002 | } catch(err) { 3003 | this.internal.htmlDlyCmdId = setTimeout(function() { 3004 | self.play(time); 3005 | }, 250); 3006 | return; // Cancel execution and wait for the delayed command. 3007 | } 3008 | } else { 3009 | media.play(); 3010 | } 3011 | this._html_checkWaitForPlay(); 3012 | }, 3013 | _html_pause: function(time) { 3014 | var self = this, 3015 | media = this.htmlElement.media; 3016 | 3017 | this.androidFix.play = false; // Cancel the play fix. 3018 | 3019 | if(time > 0) { // We do not want the stop() command, which does pause(0), causing a load operation. 3020 | this._html_load(); // Loads if required and clears any delayed commands. 3021 | } else { 3022 | clearTimeout(this.internal.htmlDlyCmdId); 3023 | } 3024 | 3025 | // Order of these commands is important for Safari (Win) and IE9. Pause then change currentTime. 3026 | media.pause(); 3027 | 3028 | // Setup the Android Fix. 3029 | if(this.androidFix.setMedia) { 3030 | this.androidFix.pause = true; 3031 | this.androidFix.time = time; 3032 | 3033 | } else if(!isNaN(time)) { 3034 | try { 3035 | if(!media.seekable || typeof media.seekable === "object" && media.seekable.length > 0) { 3036 | media.currentTime = time; 3037 | } else { 3038 | throw 1; 3039 | } 3040 | } catch(err) { 3041 | this.internal.htmlDlyCmdId = setTimeout(function() { 3042 | self.pause(time); 3043 | }, 250); 3044 | return; // Cancel execution and wait for the delayed command. 3045 | } 3046 | } 3047 | if(time > 0) { // Avoids a setMedia() followed by stop() or pause(0) hiding the video play button. 3048 | this._html_checkWaitForPlay(); 3049 | } 3050 | }, 3051 | _html_playHead: function(percent) { 3052 | var self = this, 3053 | media = this.htmlElement.media; 3054 | 3055 | this._html_load(); // Loads if required and clears any delayed commands. 3056 | 3057 | // This playHead() method needs a refactor to apply the android fix. 3058 | 3059 | try { 3060 | if(typeof media.seekable === "object" && media.seekable.length > 0) { 3061 | media.currentTime = percent * media.seekable.end(media.seekable.length-1) / 100; 3062 | } else if(media.duration > 0 && !isNaN(media.duration)) { 3063 | media.currentTime = percent * media.duration / 100; 3064 | } else { 3065 | throw "e"; 3066 | } 3067 | } catch(err) { 3068 | this.internal.htmlDlyCmdId = setTimeout(function() { 3069 | self.playHead(percent); 3070 | }, 250); 3071 | return; // Cancel execution and wait for the delayed command. 3072 | } 3073 | if(!this.status.waitForLoad) { 3074 | this._html_checkWaitForPlay(); 3075 | } 3076 | }, 3077 | _html_checkWaitForPlay: function() { 3078 | if(this.status.waitForPlay) { 3079 | this.status.waitForPlay = false; 3080 | if(this.css.jq.videoPlay.length) { 3081 | this.css.jq.videoPlay.hide(); 3082 | } 3083 | if(this.status.video) { 3084 | this.internal.poster.jq.hide(); 3085 | this.internal.video.jq.css({'width': this.status.width, 'height': this.status.height}); 3086 | } 3087 | } 3088 | }, 3089 | _html_setProperty: function(property, value) { 3090 | if(this.html.audio.available) { 3091 | this.htmlElement.audio[property] = value; 3092 | } 3093 | if(this.html.video.available) { 3094 | this.htmlElement.video[property] = value; 3095 | } 3096 | }, 3097 | _aurora_setAudio: function(media) { 3098 | var self = this; 3099 | 3100 | // Always finds a format due to checks in setMedia() 3101 | $.each(this.formats, function(priority, format) { 3102 | if(self.aurora.support[format] && media[format]) { 3103 | self.status.src = media[format]; 3104 | self.status.format[format] = true; 3105 | self.status.formatType = format; 3106 | 3107 | return false; 3108 | } 3109 | }); 3110 | 3111 | this.aurora.player = new AV.Player.fromURL(this.status.src); 3112 | this._addAuroraEventListeners(this.aurora.player, this.aurora); 3113 | 3114 | if(this.options.preload === 'auto') { 3115 | this._aurora_load(); 3116 | this.status.waitForLoad = false; 3117 | } 3118 | }, 3119 | _aurora_resetMedia: function() { 3120 | if (this.aurora.player) { 3121 | this.aurora.player.stop(); 3122 | } 3123 | }, 3124 | _aurora_clearMedia: function() { 3125 | // Nothing to clear. 3126 | }, 3127 | _aurora_load: function() { 3128 | if(this.status.waitForLoad) { 3129 | this.status.waitForLoad = false; 3130 | this.aurora.player.preload(); 3131 | } 3132 | }, 3133 | _aurora_play: function(time) { 3134 | if (!this.status.waitForLoad) { 3135 | if (!isNaN(time)) { 3136 | this.aurora.player.seek(time); 3137 | } 3138 | } 3139 | if (!this.aurora.player.playing) { 3140 | this.aurora.player.play(); 3141 | } 3142 | this.status.waitForLoad = false; 3143 | this._aurora_checkWaitForPlay(); 3144 | 3145 | // No event from the player, update UI now. 3146 | this._updateButtons(true); 3147 | this._trigger($.jPlayer.event.play); 3148 | }, 3149 | _aurora_pause: function(time) { 3150 | if (!isNaN(time)) { 3151 | this.aurora.player.seek(time * 1000); 3152 | } 3153 | this.aurora.player.pause(); 3154 | 3155 | if(time > 0) { // Avoids a setMedia() followed by stop() or pause(0) hiding the video play button. 3156 | this._aurora_checkWaitForPlay(); 3157 | } 3158 | 3159 | // No event from the player, update UI now. 3160 | this._updateButtons(false); 3161 | this._trigger($.jPlayer.event.pause); 3162 | }, 3163 | _aurora_playHead: function(percent) { 3164 | if(this.aurora.player.duration > 0) { 3165 | // The seek() sould be in milliseconds, but the only codec that works with seek (aac.js) uses seconds. 3166 | this.aurora.player.seek(percent * this.aurora.player.duration / 100); // Using seconds 3167 | } 3168 | 3169 | if(!this.status.waitForLoad) { 3170 | this._aurora_checkWaitForPlay(); 3171 | } 3172 | }, 3173 | _aurora_checkWaitForPlay: function() { 3174 | if(this.status.waitForPlay) { 3175 | this.status.waitForPlay = false; 3176 | } 3177 | }, 3178 | _aurora_volume: function(v) { 3179 | this.aurora.player.volume = v * 100; 3180 | }, 3181 | _aurora_mute: function(m) { 3182 | if (m) { 3183 | this.aurora.properties.lastvolume = this.aurora.player.volume; 3184 | this.aurora.player.volume = 0; 3185 | } else { 3186 | this.aurora.player.volume = this.aurora.properties.lastvolume; 3187 | } 3188 | this.aurora.properties.muted = m; 3189 | }, 3190 | _flash_setAudio: function(media) { 3191 | var self = this; 3192 | try { 3193 | // Always finds a format due to checks in setMedia() 3194 | $.each(this.formats, function(priority, format) { 3195 | if(self.flash.support[format] && media[format]) { 3196 | switch (format) { 3197 | case "m4a" : 3198 | case "fla" : 3199 | self._getMovie().fl_setAudio_m4a(media[format]); 3200 | break; 3201 | case "mp3" : 3202 | self._getMovie().fl_setAudio_mp3(media[format]); 3203 | break; 3204 | case "rtmpa": 3205 | self._getMovie().fl_setAudio_rtmp(media[format]); 3206 | break; 3207 | } 3208 | self.status.src = media[format]; 3209 | self.status.format[format] = true; 3210 | self.status.formatType = format; 3211 | return false; 3212 | } 3213 | }); 3214 | 3215 | if(this.options.preload === 'auto') { 3216 | this._flash_load(); 3217 | this.status.waitForLoad = false; 3218 | } 3219 | } catch(err) { this._flashError(err); } 3220 | }, 3221 | _flash_setVideo: function(media) { 3222 | var self = this; 3223 | try { 3224 | // Always finds a format due to checks in setMedia() 3225 | $.each(this.formats, function(priority, format) { 3226 | if(self.flash.support[format] && media[format]) { 3227 | switch (format) { 3228 | case "m4v" : 3229 | case "flv" : 3230 | self._getMovie().fl_setVideo_m4v(media[format]); 3231 | break; 3232 | case "rtmpv": 3233 | self._getMovie().fl_setVideo_rtmp(media[format]); 3234 | break; 3235 | } 3236 | self.status.src = media[format]; 3237 | self.status.format[format] = true; 3238 | self.status.formatType = format; 3239 | return false; 3240 | } 3241 | }); 3242 | 3243 | if(this.options.preload === 'auto') { 3244 | this._flash_load(); 3245 | this.status.waitForLoad = false; 3246 | } 3247 | } catch(err) { this._flashError(err); } 3248 | }, 3249 | _flash_resetMedia: function() { 3250 | this.internal.flash.jq.css({'width':'0px', 'height':'0px'}); // Must do via CSS as setting attr() to zero causes a jQuery error in IE. 3251 | this._flash_pause(NaN); 3252 | }, 3253 | _flash_clearMedia: function() { 3254 | try { 3255 | this._getMovie().fl_clearMedia(); 3256 | } catch(err) { this._flashError(err); } 3257 | }, 3258 | _flash_load: function() { 3259 | try { 3260 | this._getMovie().fl_load(); 3261 | } catch(err) { this._flashError(err); } 3262 | this.status.waitForLoad = false; 3263 | }, 3264 | _flash_play: function(time) { 3265 | try { 3266 | this._getMovie().fl_play(time); 3267 | } catch(err) { this._flashError(err); } 3268 | this.status.waitForLoad = false; 3269 | this._flash_checkWaitForPlay(); 3270 | }, 3271 | _flash_pause: function(time) { 3272 | try { 3273 | this._getMovie().fl_pause(time); 3274 | } catch(err) { this._flashError(err); } 3275 | if(time > 0) { // Avoids a setMedia() followed by stop() or pause(0) hiding the video play button. 3276 | this.status.waitForLoad = false; 3277 | this._flash_checkWaitForPlay(); 3278 | } 3279 | }, 3280 | _flash_playHead: function(p) { 3281 | try { 3282 | this._getMovie().fl_play_head(p); 3283 | } catch(err) { this._flashError(err); } 3284 | if(!this.status.waitForLoad) { 3285 | this._flash_checkWaitForPlay(); 3286 | } 3287 | }, 3288 | _flash_checkWaitForPlay: function() { 3289 | if(this.status.waitForPlay) { 3290 | this.status.waitForPlay = false; 3291 | if(this.css.jq.videoPlay.length) { 3292 | this.css.jq.videoPlay.hide(); 3293 | } 3294 | if(this.status.video) { 3295 | this.internal.poster.jq.hide(); 3296 | this.internal.flash.jq.css({'width': this.status.width, 'height': this.status.height}); 3297 | } 3298 | } 3299 | }, 3300 | _flash_volume: function(v) { 3301 | try { 3302 | this._getMovie().fl_volume(v); 3303 | } catch(err) { this._flashError(err); } 3304 | }, 3305 | _flash_mute: function(m) { 3306 | try { 3307 | this._getMovie().fl_mute(m); 3308 | } catch(err) { this._flashError(err); } 3309 | }, 3310 | _getMovie: function() { 3311 | return document[this.internal.flash.id]; 3312 | }, 3313 | _getFlashPluginVersion: function() { 3314 | 3315 | // _getFlashPluginVersion() code influenced by: 3316 | // - FlashReplace 1.01: http://code.google.com/p/flashreplace/ 3317 | // - SWFObject 2.2: http://code.google.com/p/swfobject/ 3318 | 3319 | var version = 0, 3320 | flash; 3321 | if(window.ActiveXObject) { 3322 | try { 3323 | flash = new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); 3324 | if (flash) { // flash will return null when ActiveX is disabled 3325 | var v = flash.GetVariable("$version"); 3326 | if(v) { 3327 | v = v.split(" ")[1].split(","); 3328 | version = parseInt(v[0], 10) + "." + parseInt(v[1], 10); 3329 | } 3330 | } 3331 | } catch(e) {} 3332 | } 3333 | else if(navigator.plugins && navigator.mimeTypes.length > 0) { 3334 | flash = navigator.plugins["Shockwave Flash"]; 3335 | if(flash) { 3336 | version = navigator.plugins["Shockwave Flash"].description.replace(/.*\s(\d+\.\d+).*/, "$1"); 3337 | } 3338 | } 3339 | return version * 1; // Converts to a number 3340 | }, 3341 | _checkForFlash: function (version) { 3342 | var flashOk = false; 3343 | if(this._getFlashPluginVersion() >= version) { 3344 | flashOk = true; 3345 | } 3346 | return flashOk; 3347 | }, 3348 | _validString: function(url) { 3349 | return (url && typeof url === "string"); // Empty strings return false 3350 | }, 3351 | _limitValue: function(value, min, max) { 3352 | return (value < min) ? min : ((value > max) ? max : value); 3353 | }, 3354 | _urlNotSetError: function(context) { 3355 | this._error( { 3356 | type: $.jPlayer.error.URL_NOT_SET, 3357 | context: context, 3358 | message: $.jPlayer.errorMsg.URL_NOT_SET, 3359 | hint: $.jPlayer.errorHint.URL_NOT_SET 3360 | }); 3361 | }, 3362 | _flashError: function(error) { 3363 | var errorType; 3364 | if(!this.internal.ready) { 3365 | errorType = "FLASH"; 3366 | } else { 3367 | errorType = "FLASH_DISABLED"; 3368 | } 3369 | this._error( { 3370 | type: $.jPlayer.error[errorType], 3371 | context: this.internal.flash.swf, 3372 | message: $.jPlayer.errorMsg[errorType] + error.message, 3373 | hint: $.jPlayer.errorHint[errorType] 3374 | }); 3375 | // Allow the audio player to recover if display:none and then shown again, or with position:fixed on Firefox. 3376 | // This really only affects audio in a media player, as an audio player could easily move the jPlayer element away from such issues. 3377 | this.internal.flash.jq.css({'width':'1px', 'height':'1px'}); 3378 | }, 3379 | _error: function(error) { 3380 | this._trigger($.jPlayer.event.error, error); 3381 | if(this.options.errorAlerts) { 3382 | this._alert("Error!" + (error.message ? "\n" + error.message : "") + (error.hint ? "\n" + error.hint : "") + "\nContext: " + error.context); 3383 | } 3384 | }, 3385 | _warning: function(warning) { 3386 | this._trigger($.jPlayer.event.warning, undefined, warning); 3387 | if(this.options.warningAlerts) { 3388 | this._alert("Warning!" + (warning.message ? "\n" + warning.message : "") + (warning.hint ? "\n" + warning.hint : "") + "\nContext: " + warning.context); 3389 | } 3390 | }, 3391 | _alert: function(message) { 3392 | var msg = "jPlayer " + this.version.script + " : id='" + this.internal.self.id +"' : " + message; 3393 | if(!this.options.consoleAlerts) { 3394 | alert(msg); 3395 | } else if(window.console && window.console.log) { 3396 | window.console.log(msg); 3397 | } 3398 | }, 3399 | _emulateHtmlBridge: function() { 3400 | var self = this; 3401 | 3402 | // Emulate methods on jPlayer's DOM element. 3403 | $.each( $.jPlayer.emulateMethods.split(/\s+/g), function(i, name) { 3404 | self.internal.domNode[name] = function(arg) { 3405 | self[name](arg); 3406 | }; 3407 | 3408 | }); 3409 | 3410 | // Bubble jPlayer events to its DOM element. 3411 | $.each($.jPlayer.event, function(eventName,eventType) { 3412 | var nativeEvent = true; 3413 | $.each( $.jPlayer.reservedEvent.split(/\s+/g), function(i, name) { 3414 | if(name === eventName) { 3415 | nativeEvent = false; 3416 | return false; 3417 | } 3418 | }); 3419 | if(nativeEvent) { 3420 | self.element.bind(eventType + ".jPlayer.jPlayerHtml", function() { // With .jPlayer & .jPlayerHtml namespaces. 3421 | self._emulateHtmlUpdate(); 3422 | var domEvent = document.createEvent("Event"); 3423 | domEvent.initEvent(eventName, false, true); 3424 | self.internal.domNode.dispatchEvent(domEvent); 3425 | }); 3426 | } 3427 | // The error event would require a special case 3428 | }); 3429 | 3430 | // IE9 has a readyState property on all elements. The document should have it, but all (except media) elements inherit it in IE9. This conflicts with Popcorn, which polls the readyState. 3431 | }, 3432 | _emulateHtmlUpdate: function() { 3433 | var self = this; 3434 | 3435 | $.each( $.jPlayer.emulateStatus.split(/\s+/g), function(i, name) { 3436 | self.internal.domNode[name] = self.status[name]; 3437 | }); 3438 | $.each( $.jPlayer.emulateOptions.split(/\s+/g), function(i, name) { 3439 | self.internal.domNode[name] = self.options[name]; 3440 | }); 3441 | }, 3442 | _destroyHtmlBridge: function() { 3443 | var self = this; 3444 | 3445 | // Bridge event handlers are also removed by destroy() through .jPlayer namespace. 3446 | this.element.unbind(".jPlayerHtml"); // Remove all event handlers created by the jPlayer bridge. So you can change the emulateHtml option. 3447 | 3448 | // Remove the methods and properties 3449 | var emulated = $.jPlayer.emulateMethods + " " + $.jPlayer.emulateStatus + " " + $.jPlayer.emulateOptions; 3450 | $.each( emulated.split(/\s+/g), function(i, name) { 3451 | delete self.internal.domNode[name]; 3452 | }); 3453 | } 3454 | }; 3455 | 3456 | $.jPlayer.error = { 3457 | FLASH: "e_flash", 3458 | FLASH_DISABLED: "e_flash_disabled", 3459 | NO_SOLUTION: "e_no_solution", 3460 | NO_SUPPORT: "e_no_support", 3461 | URL: "e_url", 3462 | URL_NOT_SET: "e_url_not_set", 3463 | VERSION: "e_version" 3464 | }; 3465 | 3466 | $.jPlayer.errorMsg = { 3467 | FLASH: "jPlayer's Flash fallback is not configured correctly, or a command was issued before the jPlayer Ready event. Details: ", // Used in: _flashError() 3468 | FLASH_DISABLED: "jPlayer's Flash fallback has been disabled by the browser due to the CSS rules you have used. Details: ", // Used in: _flashError() 3469 | NO_SOLUTION: "No solution can be found by jPlayer in this browser. Neither HTML nor Flash can be used.", // Used in: _init() 3470 | NO_SUPPORT: "It is not possible to play any media format provided in setMedia() on this browser using your current options.", // Used in: setMedia() 3471 | URL: "Media URL could not be loaded.", // Used in: jPlayerFlashEvent() and _addHtmlEventListeners() 3472 | URL_NOT_SET: "Attempt to issue media playback commands, while no media url is set.", // Used in: load(), play(), pause(), stop() and playHead() 3473 | VERSION: "jPlayer " + $.jPlayer.prototype.version.script + " needs Jplayer.swf version " + $.jPlayer.prototype.version.needFlash + " but found " // Used in: jPlayerReady() 3474 | }; 3475 | 3476 | $.jPlayer.errorHint = { 3477 | FLASH: "Check your swfPath option and that Jplayer.swf is there.", 3478 | FLASH_DISABLED: "Check that you have not display:none; the jPlayer entity or any ancestor.", 3479 | NO_SOLUTION: "Review the jPlayer options: support and supplied.", 3480 | NO_SUPPORT: "Video or audio formats defined in the supplied option are missing.", 3481 | URL: "Check media URL is valid.", 3482 | URL_NOT_SET: "Use setMedia() to set the media URL.", 3483 | VERSION: "Update jPlayer files." 3484 | }; 3485 | 3486 | $.jPlayer.warning = { 3487 | CSS_SELECTOR_COUNT: "e_css_selector_count", 3488 | CSS_SELECTOR_METHOD: "e_css_selector_method", 3489 | CSS_SELECTOR_STRING: "e_css_selector_string", 3490 | OPTION_KEY: "e_option_key" 3491 | }; 3492 | 3493 | $.jPlayer.warningMsg = { 3494 | CSS_SELECTOR_COUNT: "The number of css selectors found did not equal one: ", 3495 | CSS_SELECTOR_METHOD: "The methodName given in jPlayer('cssSelector') is not a valid jPlayer method.", 3496 | CSS_SELECTOR_STRING: "The methodCssSelector given in jPlayer('cssSelector') is not a String or is empty.", 3497 | OPTION_KEY: "The option requested in jPlayer('option') is undefined." 3498 | }; 3499 | 3500 | $.jPlayer.warningHint = { 3501 | CSS_SELECTOR_COUNT: "Check your css selector and the ancestor.", 3502 | CSS_SELECTOR_METHOD: "Check your method name.", 3503 | CSS_SELECTOR_STRING: "Check your css selector is a string.", 3504 | OPTION_KEY: "Check your option name." 3505 | }; 3506 | })); 3507 | --------------------------------------------------------------------------------