Seeking improvements
This commit is contained in:
Sam Potts
parent
4404e999eb
commit
c6e5937deb
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
10
readme.md
10
readme.md
@ -17,16 +17,20 @@ We wanted a lightweight, accessible and customisable media player that just supp
|
|||||||
- **Audio & Video** - support for both formats.
|
- **Audio & Video** - support for both formats.
|
||||||
- **API** - toggle playback, volume, seeking, and more.
|
- **API** - toggle playback, volume, seeking, and more.
|
||||||
- **Fullscreen** - supports native fullscreen with fallback to "full window" modes.
|
- **Fullscreen** - supports native fullscreen with fallback to "full window" modes.
|
||||||
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
||||||
|
|
||||||
|
Oh and yes, it works with Bootstrap.
|
||||||
|
|
||||||
## Changelog
|
## Changelog
|
||||||
Check out [the changelog](changelog.md)
|
Check out [the changelog](changelog.md)
|
||||||
|
|
||||||
## Planned development
|
## Planned development
|
||||||
- Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
|
- Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
|
||||||
- Accept a selector for the `html` template property.
|
|
||||||
- Multiple language captions (with selection)
|
- Multiple language captions (with selection)
|
||||||
- Localisation of control labels
|
- Playlists (audio and video)
|
||||||
|
- Set source by API
|
||||||
|
- Tooltip option (for seeking and controls)
|
||||||
|
... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
|
||||||
|
|
||||||
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.
|
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.
|
||||||
|
|
||||||
|
|||||||
148
src/js/plyr.js
148
src/js/plyr.js
@ -70,66 +70,68 @@
|
|||||||
enabled: true
|
enabled: true
|
||||||
},
|
},
|
||||||
html: (function() {
|
html: (function() {
|
||||||
return ["<div class='player-controls'>",
|
return [
|
||||||
"<div class='player-progress'>",
|
"<div class='player-controls'>",
|
||||||
"<label for='seek{id}' class='sr-only'>Seek</label>",
|
"<div class='player-progress'>",
|
||||||
"<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
|
"<label for='seek{id}' class='sr-only'>Seek</label>",
|
||||||
"<progress class='player-progress-played' max='100' value='0'>",
|
"<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
|
||||||
"<span>0</span>% played",
|
"<progress class='player-progress-played' max='100' value='0'>",
|
||||||
"</progress>",
|
"<span>0</span>% played",
|
||||||
"<progress class='player-progress-buffer' max='100' value='0'>",
|
"</progress>",
|
||||||
"<span>0</span>% buffered",
|
"<progress class='player-progress-buffer' max='100' value='0'>",
|
||||||
"</progress>",
|
"<span>0</span>% buffered",
|
||||||
"</div>",
|
"</progress>",
|
||||||
"<span class='player-controls-playback'>",
|
"</div>",
|
||||||
"<button type='button' data-player='restart'>",
|
"<span class='player-controls-playback'>",
|
||||||
"<svg><use xlink:href='#icon-restart'></use></svg>",
|
"<button type='button' data-player='restart'>",
|
||||||
"<span class='sr-only'>Restart</span>",
|
"<svg><use xlink:href='#icon-restart'></use></svg>",
|
||||||
"</button>",
|
"<span class='sr-only'>Restart</span>",
|
||||||
"<button type='button' data-player='rewind'>",
|
"</button>",
|
||||||
"<svg><use xlink:href='#icon-rewind'></use></svg>",
|
"<button type='button' data-player='rewind'>",
|
||||||
"<span class='sr-only'>Rewind {seektime} seconds</span>",
|
"<svg><use xlink:href='#icon-rewind'></use></svg>",
|
||||||
"</button>",
|
"<span class='sr-only'>Rewind {seektime} seconds</span>",
|
||||||
"<button type='button' data-player='play'>",
|
"</button>",
|
||||||
"<svg><use xlink:href='#icon-play'></use></svg>",
|
"<button type='button' data-player='play'>",
|
||||||
"<span class='sr-only'>Play</span>",
|
"<svg><use xlink:href='#icon-play'></use></svg>",
|
||||||
"</button>",
|
"<span class='sr-only'>Play</span>",
|
||||||
"<button type='button' data-player='pause'>",
|
"</button>",
|
||||||
"<svg><use xlink:href='#icon-pause'></use></svg>",
|
"<button type='button' data-player='pause'>",
|
||||||
"<span class='sr-only'>Pause</span>",
|
"<svg><use xlink:href='#icon-pause'></use></svg>",
|
||||||
"</button>",
|
"<span class='sr-only'>Pause</span>",
|
||||||
"<button type='button' data-player='fast-forward'>",
|
"</button>",
|
||||||
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
|
"<button type='button' data-player='fast-forward'>",
|
||||||
"<span class='sr-only'>Fast forward {seektime} seconds</span>",
|
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
|
||||||
"</button>",
|
"<span class='sr-only'>Fast forward {seektime} seconds</span>",
|
||||||
"<span class='player-time'>",
|
"</button>",
|
||||||
"<span class='sr-only'>Time</span>",
|
"<span class='player-time'>",
|
||||||
"<span class='player-duration'>00:00</span>",
|
"<span class='sr-only'>Time</span>",
|
||||||
|
"<span class='player-duration'>00:00</span>",
|
||||||
|
"</span>",
|
||||||
"</span>",
|
"</span>",
|
||||||
"</span>",
|
"<span class='player-controls-sound'>",
|
||||||
"<span class='player-controls-sound'>",
|
"<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
|
||||||
"<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
|
"<label id='mute{id}' for='mute{id}'>",
|
||||||
"<label id='mute{id}' for='mute{id}'>",
|
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
|
||||||
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
|
"<svg><use xlink:href='#icon-volume'></use></svg>",
|
||||||
"<svg><use xlink:href='#icon-volume'></use></svg>",
|
"<span class='sr-only'>Toggle Mute</span>",
|
||||||
"<span class='sr-only'>Toggle Mute</span>",
|
"</label>",
|
||||||
"</label>",
|
"<label for='volume{id}' class='sr-only'>Volume</label>",
|
||||||
"<label for='volume{id}' class='sr-only'>Volume</label>",
|
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
|
||||||
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
|
"<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
|
||||||
"<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
|
"<label for='captions{id}'>",
|
||||||
"<label for='captions{id}'>",
|
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
|
||||||
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
|
"<svg><use xlink:href='#icon-captions-off'></use></svg>",
|
||||||
"<svg><use xlink:href='#icon-captions-off'></use></svg>",
|
"<span class='sr-only'>Toggle Captions</span>",
|
||||||
"<span class='sr-only'>Toggle Captions</span>",
|
"</label>",
|
||||||
"</label>",
|
"<button type='button' data-player='fullscreen'>",
|
||||||
"<button type='button' data-player='fullscreen'>",
|
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
|
||||||
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
|
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
|
||||||
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
|
"<span class='sr-only'>Toggle fullscreen</span>",
|
||||||
"<span class='sr-only'>Toggle fullscreen</span>",
|
"</button>",
|
||||||
"</button>",
|
"</span>",
|
||||||
"</span>",
|
"</div>"
|
||||||
"</div>"].join("\n");
|
].join("\n");
|
||||||
})()
|
})()
|
||||||
};
|
};
|
||||||
|
|
||||||
// Debugging
|
// Debugging
|
||||||
@ -813,16 +815,8 @@
|
|||||||
targetTime = ((this.value / this.max) * player.media.duration).toFixed(1);
|
targetTime = ((this.value / this.max) * player.media.duration).toFixed(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle min and max values
|
// Set the current time
|
||||||
if (targetTime > player.media.duration) {
|
player.media.currentTime = targetTime;
|
||||||
player.media.currentTime = player.media.duration;
|
|
||||||
}
|
|
||||||
else if (targetTime < 0) {
|
|
||||||
player.media.currentTime = 0;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
player.media.currentTime = targetTime;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Logging
|
// Logging
|
||||||
_log("Seeking to " + player.media.currentTime + " seconds");
|
_log("Seeking to " + player.media.currentTime + " seconds");
|
||||||
@ -1079,22 +1073,6 @@
|
|||||||
// Time change on media
|
// Time change on media
|
||||||
_on(player.media, "timeupdate seeking", _timeUpdate);
|
_on(player.media, "timeupdate seeking", _timeUpdate);
|
||||||
|
|
||||||
// Pause and resume while seeking
|
|
||||||
/*_on(player.media, "seeking", function() {
|
|
||||||
if(!player.media.paused && !player.seekPaused) {
|
|
||||||
player.seekPaused = true;
|
|
||||||
_pause();
|
|
||||||
}
|
|
||||||
_log("Seeking")
|
|
||||||
});
|
|
||||||
_on(player.media, "seeked", function() {
|
|
||||||
if(player.seekPaused) {
|
|
||||||
player.seekPaused = false;
|
|
||||||
_play();
|
|
||||||
}
|
|
||||||
_log("Seeked")
|
|
||||||
});*/
|
|
||||||
|
|
||||||
// Seek
|
// Seek
|
||||||
_on(player.buttons.seek, "change input", _seek);
|
_on(player.buttons.seek, "change input", _seek);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user