apm-html5-player
Advanced tools
Comparing version
@@ -117,3 +117,3 @@ (function (global, factory) { | ||
var MUTED_CLASS = 'is-muted'; | ||
var Player = function(el, options) { | ||
var Player = function (el, options) { | ||
this.el = el; | ||
@@ -128,3 +128,3 @@ this.options = options; | ||
}; | ||
Player.prototype.init = function() { | ||
Player.prototype.init = function () { | ||
this.selectElements() | ||
@@ -138,3 +138,3 @@ .initPlaylist() | ||
}; | ||
Player.prototype.selectElements = function() { | ||
Player.prototype.selectElements = function () { | ||
this.audioEl = this.el.querySelector('audio'); | ||
@@ -160,3 +160,3 @@ this.playButtonEls = this.el.querySelectorAll('.js-player-play'); | ||
}; | ||
Player.prototype.getSources = function() { | ||
Player.prototype.getSources = function () { | ||
try { | ||
@@ -177,5 +177,5 @@ this.sources = JSON.parse( | ||
}; | ||
Player.prototype.bindEventHandlers = function() { | ||
Player.prototype.bindEventHandlers = function () { | ||
var self = this; | ||
Array.prototype.forEach.call(this.playButtonEls, function(el) { | ||
Array.prototype.forEach.call(this.playButtonEls, function (el) { | ||
el.addEventListener('click', self.onPlayClick.bind(self)); | ||
@@ -216,7 +216,7 @@ }); | ||
}; | ||
Player.prototype.initTime = function() { | ||
Player.prototype.initTime = function () { | ||
this.displayCurrentTime(); | ||
return this; | ||
}; | ||
Player.prototype.initPlaylist = function() { | ||
Player.prototype.initPlaylist = function () { | ||
if (this.playlistEl) { | ||
@@ -229,7 +229,7 @@ this.playlist = new Playlist(this); | ||
}; | ||
Player.prototype.onPlayClick = function(e) { | ||
Player.prototype.onPlayClick = function (e) { | ||
e.preventDefault(); | ||
this.handlePlay(); | ||
}; | ||
Player.prototype.handlePlay = function() { | ||
Player.prototype.handlePlay = function () { | ||
if (this.isPlaying === false) { | ||
@@ -248,3 +248,3 @@ if (this.audioEl.readyState === 0) { | ||
}; | ||
Player.prototype.onSkipForwardClick = function(e) { | ||
Player.prototype.onSkipForwardClick = function (e) { | ||
var targetEl = e.currentTarget; | ||
@@ -258,3 +258,3 @@ var seconds = targetEl.getAttribute('data-skip-forward'); | ||
}; | ||
Player.prototype.onSkipBackClick = function(e) { | ||
Player.prototype.onSkipBackClick = function (e) { | ||
var targetEl = e.currentTarget; | ||
@@ -268,3 +268,3 @@ var seconds = targetEl.getAttribute('data-skip-back'); | ||
}; | ||
Player.prototype.onTimelineClick = function(e) { | ||
Player.prototype.onTimelineClick = function (e) { | ||
var targetEl = e.currentTarget; | ||
@@ -276,3 +276,3 @@ var clickXPosition = e.pageX; | ||
}; | ||
Player.prototype.onVolumeClick = function(e) { | ||
Player.prototype.onVolumeClick = function (e) { | ||
var targetEl = e.currentTarget; | ||
@@ -290,3 +290,3 @@ var volume; | ||
}; | ||
Player.prototype.onMuteClick = function(e) { | ||
Player.prototype.onMuteClick = function (e) { | ||
e.preventDefault(); | ||
@@ -299,21 +299,21 @@ if (this.audioEl.volume !== 0) { | ||
}; | ||
Player.prototype.onAudioPlay = function() { | ||
Player.prototype.onAudioPlay = function () { | ||
this.isPlaying = true; | ||
this.displayPlayedState(); | ||
}; | ||
Player.prototype.onAudioPause = function() { | ||
Player.prototype.onAudioPause = function () { | ||
this.isPlaying = false; | ||
this.displayPausedState(); | ||
}; | ||
Player.prototype.onAudioTimeupdate = function() { | ||
Player.prototype.onAudioTimeupdate = function () { | ||
this.displayCurrentTime(); | ||
this.sendToNielsen('setPlayheadPosition', Date.now() / 1000); | ||
}; | ||
Player.prototype.onAudioWaiting = function() { | ||
Player.prototype.onAudioWaiting = function () { | ||
this.displayBufferingState(); | ||
}; | ||
Player.prototype.onAudioPlaying = function() { | ||
Player.prototype.onAudioPlaying = function () { | ||
this.displayPlayingState(); | ||
}; | ||
Player.prototype.onAudioEnded = function() { | ||
Player.prototype.onAudioEnded = function () { | ||
this.displayStoppedState(); | ||
@@ -324,13 +324,13 @@ if (this.hasPlaylist === true) { | ||
}; | ||
Player.prototype.onVolumeChange = function() { | ||
Player.prototype.onVolumeChange = function () { | ||
this.displayCurrentVolume(); | ||
}; | ||
Player.prototype.onLoadedMetadata = function() { | ||
Player.prototype.onLoadedMetadata = function () { | ||
this.displayDuration(); | ||
this.sendToNielsen('loadMetadata', window.nielsenMetadataObject); | ||
}; | ||
Player.prototype.onProgress = function() { | ||
Player.prototype.onProgress = function () { | ||
this.displayTimeRanges(); | ||
}; | ||
Player.prototype.loadAudioFromSources = function(sources) { | ||
Player.prototype.loadAudioFromSources = function (sources) { | ||
this.audioEl.removeAttribute('src'); | ||
@@ -344,5 +344,5 @@ this.audioEl.innerHTML = ''; | ||
}; | ||
Player.prototype.createSourceEls = function(sources) { | ||
Player.prototype.createSourceEls = function (sources) { | ||
var self = this; | ||
sources.forEach(function(source) { | ||
sources.forEach(function (source) { | ||
var sourceUrl; | ||
@@ -365,3 +365,3 @@ var sourceType; | ||
}; | ||
Player.prototype.getSourceType = function(source) { | ||
Player.prototype.getSourceType = function (source) { | ||
var aacReg = /\.aac/; | ||
@@ -386,3 +386,3 @@ var mp4Reg = /\.mp4/; | ||
}; | ||
Player.prototype.sendToNielsen = function(key, value) { | ||
Player.prototype.sendToNielsen = function (key, value) { | ||
if (window.nSdkInstance && this.audioEl.duration === Infinity) { | ||
@@ -392,3 +392,3 @@ window.nSdkInstance.ggPM(key, value); | ||
}; | ||
Player.prototype.unloadAudio = function() { | ||
Player.prototype.unloadAudio = function () { | ||
this.isPlaying = false; | ||
@@ -400,7 +400,7 @@ this.audioEl.innerHTML = ''; | ||
}; | ||
Player.prototype.playAudio = function() { | ||
Player.prototype.playAudio = function () { | ||
this.pauseAllAudio(); | ||
this.audioEl.play(); | ||
}; | ||
Player.prototype.pauseAudio = function(currentAudio) { | ||
Player.prototype.pauseAudio = function (currentAudio) { | ||
if (typeof currentAudio !== 'undefined') { | ||
@@ -412,10 +412,10 @@ currentAudio.pause(); | ||
}; | ||
Player.prototype.pauseAllAudio = function() { | ||
Player.prototype.pauseAllAudio = function () { | ||
var self = this; | ||
var audioEls = document.querySelectorAll('audio'); | ||
Array.prototype.forEach.call(audioEls, function(el) { | ||
Array.prototype.forEach.call(audioEls, function (el) { | ||
self.pauseAudio(el); | ||
}); | ||
}; | ||
Player.prototype.playNext = function() { | ||
Player.prototype.playNext = function () { | ||
var nextSrc = this.getNextPlaylistSrc(); | ||
@@ -433,6 +433,9 @@ var nextItemEl; | ||
}; | ||
Player.prototype.findNext = function(src) { | ||
Player.prototype.findNext = function (src) { | ||
return this.playlistEl.querySelector('li[data-src="' + src + '"]'); | ||
}; | ||
Player.prototype.getSecondsByClickPosition = function(element, clickXPosition) { | ||
Player.prototype.getSecondsByClickPosition = function ( | ||
element, | ||
clickXPosition | ||
) { | ||
var timelineRect = element.getBoundingClientRect(); | ||
@@ -447,12 +450,12 @@ var timelineOffset = timelineRect.left; | ||
}; | ||
Player.prototype.seekTime = function(seconds) { | ||
Player.prototype.seekTime = function (seconds) { | ||
this.audioEl.currentTime = seconds; | ||
}; | ||
Player.prototype.skipForward = function(seconds) { | ||
this.audioEl.currentTime = this.audioEl.currentTime + seconds; | ||
Player.prototype.skipForward = function (seconds) { | ||
this.audioEl.currentTime = this.audioEl.currentTime + Number(seconds); | ||
}; | ||
Player.prototype.skipBack = function(seconds) { | ||
this.audioEl.currentTime = this.audioEl.currentTime - seconds; | ||
Player.prototype.skipBack = function (seconds) { | ||
this.audioEl.currentTime = this.audioEl.currentTime - Number(seconds); | ||
}; | ||
Player.prototype.getVolumeByHorizClickPosition = function( | ||
Player.prototype.getVolumeByHorizClickPosition = function ( | ||
element, | ||
@@ -469,3 +472,3 @@ clickXPosition | ||
}; | ||
Player.prototype.getVolumeByVertClickPosition = function( | ||
Player.prototype.getVolumeByVertClickPosition = function ( | ||
element, | ||
@@ -483,5 +486,5 @@ clickYPosition | ||
}; | ||
Player.prototype.getCurrentPlaylistItem = function() { | ||
Player.prototype.getCurrentPlaylistItem = function () { | ||
var srcString = this.el.getAttribute('data-src'); | ||
var items = Array.prototype.filter.call(this.playlist.itemEls, function(el) { | ||
var items = Array.prototype.filter.call(this.playlist.itemEls, function (el) { | ||
return el.matches('[data-src="' + srcString + '"]'); | ||
@@ -492,10 +495,10 @@ }); | ||
}; | ||
Player.prototype.getNextPlaylistSrc = function() { | ||
Player.prototype.getNextPlaylistSrc = function () { | ||
var itemEl = this.getCurrentPlaylistItem(); | ||
return itemEl.getAttribute('data-next'); | ||
}; | ||
Player.prototype.changeVolume = function(volume) { | ||
Player.prototype.changeVolume = function (volume) { | ||
this.audioEl.volume = volume; | ||
}; | ||
Player.prototype.muteAudio = function() { | ||
Player.prototype.muteAudio = function () { | ||
this.storedVolume = this.audioEl.volume; | ||
@@ -505,3 +508,3 @@ this.displayMutedState(); | ||
}; | ||
Player.prototype.unmuteAudio = function() { | ||
Player.prototype.unmuteAudio = function () { | ||
this.displayUnmutedState(); | ||
@@ -514,3 +517,3 @@ if (this.storedVolume) { | ||
}; | ||
Player.prototype.displayDuration = function() { | ||
Player.prototype.displayDuration = function () { | ||
if (!this.durationEl) return; | ||
@@ -523,3 +526,3 @@ var duration; | ||
}; | ||
Player.prototype.displayCurrentTime = function() { | ||
Player.prototype.displayCurrentTime = function () { | ||
if (!this.currentTimeEl) return; | ||
@@ -535,3 +538,3 @@ var currentTime = toFormatted(this.audioEl.currentTime); | ||
}; | ||
Player.prototype.updateTimelineProgress = function() { | ||
Player.prototype.updateTimelineProgress = function () { | ||
if (!this.timelineEl) return; | ||
@@ -541,3 +544,3 @@ var progress = (this.audioEl.currentTime / this.audioEl.duration) * 100; | ||
}; | ||
Player.prototype.displayTimeRanges = function() { | ||
Player.prototype.displayTimeRanges = function () { | ||
if (!this.timelineBufferedEl) return; | ||
@@ -565,3 +568,3 @@ if (this.isPlaying !== true) return; | ||
}; | ||
Player.prototype.displayPlayedState = function() { | ||
Player.prototype.displayPlayedState = function () { | ||
this.el.classList.remove(PAUSED_CLASS); | ||
@@ -573,3 +576,3 @@ this.el.classList.add(PLAYING_CLASS); | ||
}; | ||
Player.prototype.displayPausedState = function() { | ||
Player.prototype.displayPausedState = function () { | ||
this.el.classList.remove(PLAYING_CLASS); | ||
@@ -581,3 +584,3 @@ this.el.classList.add(PAUSED_CLASS); | ||
}; | ||
Player.prototype.displayPlayingState = function() { | ||
Player.prototype.displayPlayingState = function () { | ||
this.removeBufferingState(); | ||
@@ -588,3 +591,3 @@ if (this.hasPlaylist === true) { | ||
}; | ||
Player.prototype.displayStoppedState = function() { | ||
Player.prototype.displayStoppedState = function () { | ||
this.el.classList.remove(PLAYING_CLASS); | ||
@@ -597,3 +600,3 @@ this.el.classList.remove(PAUSED_CLASS); | ||
}; | ||
Player.prototype.displayBufferingState = function() { | ||
Player.prototype.displayBufferingState = function () { | ||
this.el.classList.add(LOADING_CLASS); | ||
@@ -604,3 +607,3 @@ if (this.hasPlaylist === true) { | ||
}; | ||
Player.prototype.removeBufferingState = function() { | ||
Player.prototype.removeBufferingState = function () { | ||
this.el.classList.remove(LOADING_CLASS); | ||
@@ -611,3 +614,3 @@ if (this.hasPlaylist === true) { | ||
}; | ||
Player.prototype.displayCurrentVolume = function() { | ||
Player.prototype.displayCurrentVolume = function () { | ||
if (!this.volumeBarEl) return; | ||
@@ -627,6 +630,6 @@ var volumePercent = this.audioEl.volume * 100; | ||
}; | ||
Player.prototype.displayMutedState = function() { | ||
Player.prototype.displayMutedState = function () { | ||
this.el.classList.add(MUTED_CLASS); | ||
}; | ||
Player.prototype.displayUnmutedState = function() { | ||
Player.prototype.displayUnmutedState = function () { | ||
this.el.classList.remove(MUTED_CLASS); | ||
@@ -633,0 +636,0 @@ }; |
@@ -31,3 +31,3 @@ { | ||
"title": "APM HTML5 Player", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"devDependencies": { | ||
@@ -34,0 +34,0 @@ "@babel/cli": "^7.4.4", |
@@ -262,7 +262,7 @@ # APM Player | ||
"url": "https://example.com/my-audio.aac", | ||
"type": "audio/mp4" | ||
"type": "audio/aac" | ||
}, | ||
{ | ||
"url": "https://example.com/my-audio.mp3", | ||
"type": "audio/mp3" | ||
"type": "audio/mpeg" | ||
} | ||
@@ -272,3 +272,3 @@ ] | ||
This provides a file in the AAC codec, which should use the `audio/mp4` file container type as the preferred format, and the browser will fall back to the MP3 file (type `audio/mp3`) if it can't play AAC audio. | ||
This provides a file in the AAC codec, which should use the `audio/aac` file container type as the preferred format, and the browser will fall back to the MP3 file (type `audio/mpeg`) if it can't play AAC audio. | ||
@@ -278,3 +278,3 @@ To apply this to the DOM it should look like this. The JSON can use single quotes here instead of double quotes if preferred: | ||
```html | ||
<div class="js-player" data-src="[{'url': 'https://example.com/my-audio.aac', 'type': 'audio/mp4'}, {'url': 'https://example.com/my-audio.mp3', 'type': 'audio/mp3'}]"> | ||
<div class="js-player" data-src="[{'url': 'https://example.com/my-audio.aac', 'type': 'audio/aac'}, {'url': 'https://example.com/my-audio.mp3', 'type': 'audio/mpeg'}]"> | ||
<audio></audio> | ||
@@ -288,3 +288,3 @@ </div> | ||
<audio> | ||
<source src="https://example.com/my-audio.aac" type="audio/mp4"> | ||
<source src="https://example.com/my-audio.aac" type="audio/aac"> | ||
<source src="https://example.com/my-audio.mp3" type="audio/mpeg"> | ||
@@ -299,3 +299,3 @@ </audio> | ||
```html | ||
<div class="js-player" data-src="['https://example.com/my-audio.aac', 'https://example.com/my-audio.aac', 'https://example.com/my-audio.mp3']"> | ||
<div class="js-player" data-src="['https://example.com/my-audio.aac', 'https://example.com/my-audio.ogg', 'https://example.com/my-audio.mp3']"> | ||
<audio></audio> | ||
@@ -309,3 +309,3 @@ </div> | ||
<audio> | ||
<source src="https://example.com/my-audio.aac" type="audio/mp4"> | ||
<source src="https://example.com/my-audio.aac" type="audio/aac"> | ||
<source src="https://example.com/my-audio.ogg" type="audio/ogg"> | ||
@@ -381,3 +381,3 @@ <source src="https://example.com/my-audio.mp3" type="audio/mpeg"> | ||
// The DOM element container | ||
const playerElement = document.querySelector('js-player'); | ||
const playerElement = document.querySelector('.js-player'); | ||
// Create new instance of the Player class | ||
@@ -397,3 +397,3 @@ const player = new Player(playerElement); | ||
var playerElement = document.querySelector('js-player'); | ||
var playerElement = document.querySelector('.js-player'); | ||
var player = new window.ApmPlayer.Player(playerElement); | ||
@@ -416,2 +416,4 @@ | ||
To get started, just clone this repo and then from the project directory run `npm install` or `yarn`. Then you can do the following: | ||
### Linting | ||
@@ -430,3 +432,3 @@ | ||
To build the library, run `npm run build` and it will update the `bundle.js` file in the `dist` directory. | ||
The dist directory is included in | ||
The dist directory is included in the repo so that the library can be used with Bower or without npm/yarn. | ||
@@ -433,0 +435,0 @@ ### Testing |
72574
68.23%11
175%1463
104.33%447
0.45%