Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video trimming UI plugin #1798

Open
wants to merge 24 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
ba312b2
Structural code for video trimming UI
Danielh112 Apr 2, 2020
72f1568
Merge remote-tracking branch 'origin/develop' into video-trimming-plugin
Danielh112 Apr 2, 2020
4c75bcc
Trim tool icons added
DanielHuntleySBG Apr 3, 2020
c82fa73
If the user is using the trimming tool, check if the seek position is…
DanielHuntleySBG Apr 3, 2020
f5bc729
Improved styling of Trimming timeline
DanielHuntleySBG Apr 4, 2020
13d15b6
Fix to only update the current time when the user has finished settin…
DanielHuntleySBG Apr 4, 2020
ef5bccf
Trimming tool: Implementation of timestamp above each thumb to displa…
DanielHuntleySBG Apr 5, 2020
d8ae6e2
Improve accessiblity: Inclusion of aria metadata
DanielHuntleySBG Apr 6, 2020
c9f8329
Nit pick fixes for trimming tool PR
DanielHuntleySBG Apr 6, 2020
5780e0d
Remove plyr.svg from pull request
DanielHuntleySBG Apr 6, 2020
e13be14
Trimming: On source change update whether or not to show the trimming…
DanielHuntleySBG Apr 6, 2020
5bb96f3
Merge branch 'video-trimming-plugin' of https://github.com/SBGSports/…
DanielHuntleySBG Apr 6, 2020
2ab8a88
Video trimming bug fix: When switching sources a new trimming object …
DanielHuntleySBG Apr 7, 2020
c0fa6d5
Trimming: Change structure of triggerevent messages so that they are …
DanielHuntleySBG Apr 8, 2020
81d77eb
Remove Timeupdate event listener when changing source as two instance…
DanielHuntleySBG Apr 9, 2020
ee73dc4
Convert the default trim length to percent as for longer videos it wa…
DanielHuntleySBG Apr 9, 2020
5e53137
Addition of a couple additional api endpoints to get and set the star…
DanielHuntleySBG Apr 9, 2020
83ab236
Update to use the existing clamp function | Improve commenting for se…
DanielHuntleySBG Apr 9, 2020
bc2fbc4
Remove getter and setter for trimming from plyr.js as it can be acces…
DanielHuntleySBG Apr 11, 2020
bdf4718
Remove settrimstart and settrimend from plyr.js as they can be set fr…
DanielHuntleySBG Apr 11, 2020
04941a0
Calling trim.enter or trim.exit did not update the video trim control…
DanielHuntleySBG Apr 14, 2020
64dc1fd
Fix to Trimming tool, to prevent the start time being before the end …
DanielHuntleySBG Apr 20, 2020
6f06907
Merge develop branch back into video trimming branch
DanielHuntleySBG Apr 24, 2020
3aed88e
resolve merge conflicts
DanielHuntleySBG Nov 16, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Nit pick fixes for trimming tool PR
DanielHuntleySBG committed Apr 6, 2020
commit c9f832927398835ee95f6dc3429bb4ee8b6e866f
6 changes: 3 additions & 3 deletions readme.md
Original file line number Diff line number Diff line change
@@ -448,7 +448,7 @@ player.source = {
],
poster: '/path/to/poster.jpg',
previewThumbnails: {
src: '/path/to/thumbnails.vtt',
src: '/path/to/thumbnails.vtt'
},
tracks: [
{
@@ -579,7 +579,7 @@ player.on('ready', event => {
| `waiting` | Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). |
| `emptied` | he media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the `load()` method is called to reload it. |
| `cuechange` | Sent when a `TextTrack` has changed the currently displaying cues. |
| `entertrim` | Sent when the player enters the trimming tool |
| `entertrim` | Sent when the player enters the trimming tool. |
| `exittrim` | Sent when the player exits the trimming tool mode. |
| `trimchange` | Sent when the trimming region has changed. |
| `error` | Sent when an error occurs. The element's `error` attribute contains more information. |
@@ -637,7 +637,7 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http

# Trimming

It's possible to create a trim region for your video using the trim control. You will need to generate the clip yourself through listening to the 'trimchange' event and will return the start and end of the selected region.
It's possible to create a trim region from your video using the trim mode. This is useful when creating clips or repeating loops. The 'trimchange' event will give you the start and end time of the selected region.

# Browser support

2 changes: 1 addition & 1 deletion src/js/config/defaults.js
Original file line number Diff line number Diff line change
@@ -145,7 +145,7 @@ const defaults = {
'pip',
'airplay',
// 'download',
'trim',
// 'trim',
'fullscreen',
],
settings: ['captions', 'quality', 'speed'],
2 changes: 1 addition & 1 deletion src/js/controls.js
Original file line number Diff line number Diff line change
@@ -53,7 +53,7 @@ const controls = {

// Buttons
this.elements.buttons = {
play: getElements.call(this, this.config.selectors.buttons),
play: getElements.call(this, this.config.selectors.buttons.play),
pause: getElement.call(this, this.config.selectors.buttons.pause),
restart: getElement.call(this, this.config.selectors.buttons.restart),
rewind: getElement.call(this, this.config.selectors.buttons.rewind),