Comments (11)
Cool! You might want to use MutationObserver rather than DOM events given the performance benefit:
https://developer.mozilla.org/en/docs/Web/API/MutationObserver
from plyr.
Just to add a couple data points on going this route to implement thumbnails over the time rail. THEOplayer and Radiant Media Player also implement thumbnails over the time rail using a WebVTT metadata file that points to images using a sprite with media fragments.
https://support.theoplayer.com/hc/en-us/articles/207460505-Preview-Thumbnails
https://www.radiantmediaplayer.com/docs/3.0/preview-thumbnails.html
When I had implemented a plugin for MediaElement.js to do similar, I found MutationObserver to help with performance.
from plyr.
Hey @adantzler,
Thanks! Nice idea. I'll have a look at implementing something for sure. π
from plyr.
That's awesome, let me know if I can help in any way.
On Tue, Mar 3, 2015 at 4:12 PM, Sam Potts [email protected] wrote:
Hey @adantzler https://github.com/adantzler,
Thanks! Nice idea. I'll have a look at implementing something for sure. [image:
π]β
Reply to this email directly or view it on GitHub
#46 (comment).
from plyr.
I've created a little snippet to catch displayed seek onHover π
var video = document.getElementById("thumb");
video.addEventListener("loadedmetadata", getSeeker);
function getSeeker(){
var seekTime;
$('.plyr__progress--seek').mousemove(function() {
if (enableHandler) {
$(".plyr__tooltip.plyr__tooltip--visible").on('DOMSubtreeModified', function(){
seekTime = ($(this).html());
// add Thumbnail DIV at the requested time
});
enableHandler = false;
}
});
$('.plyr__progress--seek').mouseout(function() {
// >>remove thumbnail div correctly
});
timer = window.setInterval(function(){
enableHandler = true;
}, 100);
}
from plyr.
Thanks! I didn't looked at performance, because I did not finished yet. I will take a look at MutationObserver, when will be ready and works well for me, I will post it here.
I think it will be easy if you could provide seekTime either than grab it, but It's not a hurry.
Here is a dynamic thumbnail, I don't think its powerful, I would recommend server-side thumbnails.
HTML code
<canvas id="canvas"
width="750px" height="540px"
style="display:block;">
</canvas>
<div id="screenShots"></div>
JS code
var video = document.getElementById("thumb");
video.addEventListener("loadedmetadata", initScreenshot)
video.addEventListener("playing", startScreenshot);
video.addEventListener("pause", stopScreenshot);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ssContainer = document.getElementById("screenShots");
var videoHeight, videoWidth;
var drawTimer = null;
function initScreenshot(){
videoHeight = video.videoHeight;
videoWidth = video.videoWidth;
//canvas.width = videoWidth;
//canvas.height = videoHeight;
}
function startScreenshot(){
if(drawTimer == null) {
drawTimer = setInterval(grabScreenshot, 1000);
}
}
function stopScreenshot(){
if(drawTimer) {
clearInterval (drawTimer);
drawTimer = null;
}
}
function grabScreenshot(){
ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
var img = new Image();
img.src = canvas.toDataURL("image/png");
img.width = 120;
ssContainer.appendChild(img);
}
from plyr.
I started work on this today.) Just FYI in case of a freak overlap of someone else also thinking to finally do this.) Should be done some time this week jamesoflol@5bd00ab
from plyr.
@jamesoflol
Thanks a lot for this plugin. The issues I could find:
a) "hours" are optional in WebVTT: https://www.w3.org/TR/webvtt1/#webvtt-timestamp
The problem is this regex:
https://github.com/sampotts/plyr/blob/develop/src/js/plugins/previewThumbnails.js#L597
b) It should be possible to use absolute URLs (e.g. https://example.com/thumb.jpg)
The problem is here:
https://github.com/sampotts/plyr/blob/develop/src/js/plugins/previewThumbnails.js#L101
from plyr.
Patch to fix hours:
*** previewThumbnails.js-old 2018-12-19 19:18:36.227152525 +0100
--- previewThumbnails.js 2018-12-19 19:19:05.456949845 +0100
*************** class PreviewThumbnails {
*** 594,604 ****
for (const line of frame.split(/\r\n|\n|\r/)) {
if (result.startTime == null) {
// The line with start and end times on it is the first line of interest
! const matchTimes = line.match(/(?:([0-9]{2}):)?([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)(?:([0-9]{2}):)?([0-9]{2}):([0-9]{2}).([0-9]{2,3})/) // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT
if (matchTimes) {
! result.startTime = Number(matchTimes[1]) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0." + matchTimes[4])
! result.endTime = Number(matchTimes[6]) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0." + matchTimes[9])
}
} else {
// If we already have the startTime, then we're definitely up to the text line(s)
--- 594,604 ----
for (const line of frame.split(/\r\n|\n|\r/)) {
if (result.startTime == null) {
// The line with start and end times on it is the first line of interest
! const matchTimes = line.match(/([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})/) // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT
if (matchTimes) {
! result.startTime = Number(matchTimes[1] || 0) * 60 * 60 + Number(matchTimes[2]) * 60 + Number(matchTimes[3]) + Number("0." + matchTimes[4])
! result.endTime = Number(matchTimes[6] || 0) * 60 * 60 + Number(matchTimes[7]) * 60 + Number(matchTimes[8]) + Number("0." + matchTimes[9])
}
} else {
// If we already have the startTime, then we're definitely up to the text line(s)
from plyr.
Thanks doublex! Have implemented fixes for both 'a' and 'b'. I've also fixed a minor issue with images loading out of order. https://github.com/jamesoflol/plyr/commits/preview-thumbs
@sampotts should I put in a new PR?
from plyr.
@jamesoflol
Thanks a lot. Patch works for me
from plyr.
Related Issues (20)
- Preroll Advertisement on YouTube Video
- Media should always start playing at 1Γ speed to avoid ruining music.
- Advise needed
- "Loop" option
- Overlay display with VAST ads
- Dist files include links to non-existing sourceMaps HOT 1
- Youtube ve Google Drive (Audio) API Problem
- Video Buffering Issue with Seek Videos using HLS from Cloudflare Stream HOT 1
- Plyr doesn't work on next.js 14 HOT 2
- about the aria-pressed status of control buttons
- Few vimeo videos are getting zoom out in player with audio also not getting played. HOT 3
- Orientation on mobile devices
- Add shortcuts (hotkeys) for Speed video and audio
- Vimeo closed captions playing by default
- Local audio file causes issue when seeking in timeline
- Update captions after player init
- The latest version of plyr (3.7.8) still has uncompiled ?? syntax in the packaged product.
- Play button not working in mobile and in Dev toolts Chrome on responsive
- how to update markers
- Version 4.7.8,error when βnpm startβ my project,what causes it
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plyr.