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

Media: Skip video optimization based on criteria #11454

Merged
merged 36 commits into from
Jul 20, 2022
Merged

Conversation

swissspidy
Copy link
Collaborator

@swissspidy swissspidy commented May 9, 2022

Context

We want to avoid needlessly running video optimization on videos that are already in very good shape, for example when the creator has manually optimized videos before upload.

The aim is to improve overall user experience and performance during uploads.

Summary

Relevant Technical Choices

Uses mediainfo.js to get detailed information about codecs, file size, frame rate, etc.

For the start, small videos (< 5MB), with either MP4 or WEBM type and max dimensions of 720x1280, will be automatically marked as optimized.

To-do

User-facing changes

No visual changes per se, but when uploading smaller videos fitting the criteria they will not be optimized by default anymore.

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

  1. Enable video optimization
  2. Upload small videos (< 5MB), with either MP4 or WEBM type and max dimensions of 720x1280
  3. Notice that video is not automatically optimized, but uploaded straight away
  4. Notice that the checklist does not mark the video as un-optimized
  5. Verify that larger videos are still going through optimization
  6. Disable video optimization
  7. Verify that uploads still work. Smaller videos are marged as optimized, while larger videos and videos of other types (e.g. MOV) are rejected

Reviews

Does this PR have a security-related impact?

No

Does this PR change what data or activity we track or use?

No

Does this PR have a legal-related impact?

No

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #11405

@swissspidy swissspidy added Type: Enhancement New feature or improvement of an existing feature Group: Media Pod: WP Group: Video Optimization Media transcoding, compression and cropping labels May 9, 2022
@swissspidy swissspidy marked this pull request as ready for review June 27, 2022 15:55
@swissspidy swissspidy changed the title [WIP] Media: Skip video optimization based on criteria Media: Skip video optimization based on criteria Jun 27, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jun 27, 2022

Size Change: +905 B (0%)

Total Size: 2.65 MB

Filename Size Change
assets/js/wp-story-editor.js 326 kB +905 B (0%)
ℹ️ View Unchanged
Filename Size
assets/css/carousel-view-rtl.css 702 B
assets/css/carousel-view.css 701 B
assets/css/web-stories-block-rtl.css 4.52 kB
assets/css/web-stories-block.css 4.56 kB
assets/css/web-stories-embed-rtl.css 318 B
assets/css/web-stories-embed.css 317 B
assets/css/web-stories-list-styles-rtl.css 2.36 kB
assets/css/web-stories-list-styles.css 2.39 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B
assets/css/web-stories-theme-style-twentyten.css 143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B
assets/css/web-stories-widget-rtl.css 482 B
assets/css/web-stories-widget.css 482 B
assets/css/wp-dashboard-rtl.css 657 B
assets/css/wp-dashboard.css 659 B
assets/css/wp-story-editor-rtl.css 737 B
assets/css/wp-story-editor.css 738 B
assets/js/1590.js 1.14 MB
assets/js/1814.js 7.46 kB
assets/js/2505.js 34.9 kB
assets/js/3617.js 224 kB
assets/js/4422.js 49.3 kB
assets/js/5980.js 5.48 kB
assets/js/carousel-view.js 3.41 kB
assets/js/chunk-colorthief.js 2.64 kB
assets/js/chunk-ffmpeg.js 5.64 kB
assets/js/chunk-focus-visible.js 1.01 kB
assets/js/chunk-getStoryMarkup.js 5.82 kB
assets/js/chunk-html-to-image.js 4.6 kB
assets/js/chunk-opentype.js 96 B
assets/js/chunk-react-calendar.js 12.4 kB
assets/js/chunk-react-color.js 44.3 kB
assets/js/chunk-resize-observer-polyfill.js 2.57 kB
assets/js/chunk-web-animations-js.js 14.6 kB
assets/js/chunk-web-stories-template-0-metaData.js 546 B
assets/js/chunk-web-stories-template-0.js 10.6 kB
assets/js/chunk-web-stories-template-1-metaData.js 540 B
assets/js/chunk-web-stories-template-1.js 9.01 kB
assets/js/chunk-web-stories-template-10-metaData.js 533 B
assets/js/chunk-web-stories-template-10.js 6.91 kB
assets/js/chunk-web-stories-template-11-metaData.js 540 B
assets/js/chunk-web-stories-template-11.js 8.51 kB
assets/js/chunk-web-stories-template-12-metaData.js 496 B
assets/js/chunk-web-stories-template-12.js 9.48 kB
assets/js/chunk-web-stories-template-13-metaData.js 525 B
assets/js/chunk-web-stories-template-13.js 7.3 kB
assets/js/chunk-web-stories-template-14-metaData.js 582 B
assets/js/chunk-web-stories-template-14.js 7.58 kB
assets/js/chunk-web-stories-template-15-metaData.js 544 B
assets/js/chunk-web-stories-template-15.js 8.21 kB
assets/js/chunk-web-stories-template-16-metaData.js 588 B
assets/js/chunk-web-stories-template-16.js 10.3 kB
assets/js/chunk-web-stories-template-17-metaData.js 539 B
assets/js/chunk-web-stories-template-17.js 8.52 kB
assets/js/chunk-web-stories-template-18-metaData.js 585 B
assets/js/chunk-web-stories-template-18.js 9.05 kB
assets/js/chunk-web-stories-template-19-metaData.js 501 B
assets/js/chunk-web-stories-template-19.js 9.99 kB
assets/js/chunk-web-stories-template-2-metaData.js 586 B
assets/js/chunk-web-stories-template-2.js 9.16 kB
assets/js/chunk-web-stories-template-20-metaData.js 548 B
assets/js/chunk-web-stories-template-20.js 8.59 kB
assets/js/chunk-web-stories-template-21-metaData.js 534 B
assets/js/chunk-web-stories-template-21.js 9.16 kB
assets/js/chunk-web-stories-template-22-metaData.js 525 B
assets/js/chunk-web-stories-template-22.js 7.37 kB
assets/js/chunk-web-stories-template-23-metaData.js 605 B
assets/js/chunk-web-stories-template-23.js 6.99 kB
assets/js/chunk-web-stories-template-24-metaData.js 518 B
assets/js/chunk-web-stories-template-24.js 10.8 kB
assets/js/chunk-web-stories-template-25-metaData.js 544 B
assets/js/chunk-web-stories-template-25.js 7.07 kB
assets/js/chunk-web-stories-template-26-metaData.js 601 B
assets/js/chunk-web-stories-template-26.js 6.85 kB
assets/js/chunk-web-stories-template-27-metaData.js 543 B
assets/js/chunk-web-stories-template-27.js 7.36 kB
assets/js/chunk-web-stories-template-28-metaData.js 532 B
assets/js/chunk-web-stories-template-28.js 8.49 kB
assets/js/chunk-web-stories-template-29-metaData.js 561 B
assets/js/chunk-web-stories-template-29.js 8.49 kB
assets/js/chunk-web-stories-template-3-metaData.js 540 B
assets/js/chunk-web-stories-template-3.js 8.22 kB
assets/js/chunk-web-stories-template-30-metaData.js 576 B
assets/js/chunk-web-stories-template-30.js 7.67 kB
assets/js/chunk-web-stories-template-31-metaData.js 503 B
assets/js/chunk-web-stories-template-31.js 9.61 kB
assets/js/chunk-web-stories-template-32-metaData.js 551 B
assets/js/chunk-web-stories-template-32.js 12.2 kB
assets/js/chunk-web-stories-template-33-metaData.js 492 B
assets/js/chunk-web-stories-template-33.js 8.86 kB
assets/js/chunk-web-stories-template-34-metaData.js 571 B
assets/js/chunk-web-stories-template-34.js 7.57 kB
assets/js/chunk-web-stories-template-35-metaData.js 565 B
assets/js/chunk-web-stories-template-35.js 8.81 kB
assets/js/chunk-web-stories-template-36-metaData.js 576 B
assets/js/chunk-web-stories-template-36.js 11.6 kB
assets/js/chunk-web-stories-template-37-metaData.js 528 B
assets/js/chunk-web-stories-template-37.js 6.47 kB
assets/js/chunk-web-stories-template-38-metaData.js 572 B
assets/js/chunk-web-stories-template-38.js 7.96 kB
assets/js/chunk-web-stories-template-39-metaData.js 589 B
assets/js/chunk-web-stories-template-39.js 7.67 kB
assets/js/chunk-web-stories-template-4-metaData.js 565 B
assets/js/chunk-web-stories-template-4.js 11.5 kB
assets/js/chunk-web-stories-template-40-metaData.js 556 B
assets/js/chunk-web-stories-template-40.js 9.13 kB
assets/js/chunk-web-stories-template-41-metaData.js 572 B
assets/js/chunk-web-stories-template-41.js 7.75 kB
assets/js/chunk-web-stories-template-42-metaData.js 522 B
assets/js/chunk-web-stories-template-42.js 7 kB
assets/js/chunk-web-stories-template-43-metaData.js 558 B
assets/js/chunk-web-stories-template-43.js 8.37 kB
assets/js/chunk-web-stories-template-44-metaData.js 582 B
assets/js/chunk-web-stories-template-44.js 10.1 kB
assets/js/chunk-web-stories-template-45-metaData.js 564 B
assets/js/chunk-web-stories-template-45.js 7.12 kB
assets/js/chunk-web-stories-template-46-metaData.js 531 B
assets/js/chunk-web-stories-template-46.js 5.01 kB
assets/js/chunk-web-stories-template-47-metaData.js 592 B
assets/js/chunk-web-stories-template-47.js 8.46 kB
assets/js/chunk-web-stories-template-48-metaData.js 556 B
assets/js/chunk-web-stories-template-48.js 8.31 kB
assets/js/chunk-web-stories-template-49-metaData.js 518 B
assets/js/chunk-web-stories-template-49.js 9.7 kB
assets/js/chunk-web-stories-template-5-metaData.js 555 B
assets/js/chunk-web-stories-template-5.js 9.38 kB
assets/js/chunk-web-stories-template-50-metaData.js 504 B
assets/js/chunk-web-stories-template-50.js 8.26 kB
assets/js/chunk-web-stories-template-51-metaData.js 527 B
assets/js/chunk-web-stories-template-51.js 9.89 kB
assets/js/chunk-web-stories-template-52-metaData.js 602 B
assets/js/chunk-web-stories-template-52.js 10.1 kB
assets/js/chunk-web-stories-template-53-metaData.js 553 B
assets/js/chunk-web-stories-template-53.js 5.79 kB
assets/js/chunk-web-stories-template-54-metaData.js 547 B
assets/js/chunk-web-stories-template-54.js 7.52 kB
assets/js/chunk-web-stories-template-55-metaData.js 574 B
assets/js/chunk-web-stories-template-55.js 6.56 kB
assets/js/chunk-web-stories-template-56-metaData.js 543 B
assets/js/chunk-web-stories-template-56.js 9.5 kB
assets/js/chunk-web-stories-template-57-metaData.js 528 B
assets/js/chunk-web-stories-template-57.js 14.1 kB
assets/js/chunk-web-stories-template-58-metaData.js 556 B
assets/js/chunk-web-stories-template-58.js 5.61 kB
assets/js/chunk-web-stories-template-59-metaData.js 588 B
assets/js/chunk-web-stories-template-59.js 8.52 kB
assets/js/chunk-web-stories-template-6-metaData.js 569 B
assets/js/chunk-web-stories-template-6.js 7.04 kB
assets/js/chunk-web-stories-template-60-metaData.js 509 B
assets/js/chunk-web-stories-template-60.js 8.89 kB
assets/js/chunk-web-stories-template-7-metaData.js 569 B
assets/js/chunk-web-stories-template-7.js 7.21 kB
assets/js/chunk-web-stories-template-8-metaData.js 569 B
assets/js/chunk-web-stories-template-8.js 8.4 kB
assets/js/chunk-web-stories-template-9-metaData.js 581 B
assets/js/chunk-web-stories-template-9.js 8.49 kB
assets/js/chunk-web-stories-templates.js 443 B
assets/js/chunk-web-stories-textset-0.js 5.08 kB
assets/js/chunk-web-stories-textset-1.js 6.64 kB
assets/js/chunk-web-stories-textset-2.js 7.67 kB
assets/js/chunk-web-stories-textset-3.js 15.1 kB
assets/js/chunk-web-stories-textset-4.js 4.16 kB
assets/js/chunk-web-stories-textset-5.js 5.49 kB
assets/js/chunk-web-stories-textset-6.js 5.3 kB
assets/js/chunk-web-stories-textset-7.js 10.2 kB
assets/js/generateBlurhash.worker.worker.js 1.1 kB
assets/js/imgareaselect.js 3.77 kB
assets/js/lightbox.js 550 B
assets/js/tinymce-button.js 2.84 kB
assets/js/web-stories-activation-notice.js 26.9 kB
assets/js/web-stories-block.js 22.7 kB
assets/js/web-stories-embed.js 20 B
assets/js/web-stories-widget.js 587 B
assets/js/wp-dashboard.js 72.7 kB

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Jun 27, 2022

Plugin builds for 627a736 are ready 🛎️!

@spacedmonkey
Copy link
Contributor

I am not longer seeing progress bars on uploading items :( See #11454 (comment)

@spacedmonkey
Copy link
Contributor

I am seeing the poster generation hanging.

Screen.Recording.2022-07-14.at.11.57.17.mov

I believe this is happening because poster generation is trying to happen on blob url. Not sure why this is happening.

@spacedmonkey
Copy link
Contributor

I believe this is happening because poster generation is trying to happen on blob url. Not sure why this is happening.

This seems to be happening on main as well.

Copy link
Contributor

@spacedmonkey spacedmonkey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good first start. I think we have more to do here in future PRs.

@felipebochehin87
Copy link

@spacedmonkey @swissspidy I still see the "Video optimization" message when I upload a video that is a mp4 file, 3.97MB, 720x1280. The video that I am uploading is the second one. The first is to show that the message is still being displayed.

https://images.zenhubusercontent.com/235435637/d65fd64d-f708-4987-a113-d099b06948d2/video_opt_message.mp4

https://images.zenhubusercontent.com/235435637/b54ad3c3-e372-4f5a-822b-9fd6a6a3898a/3_97_mb_720_1280.mp4

@swissspidy
Copy link
Collaborator Author

@felipebochehin87 Good catch! There was some incorrect comparison being used ("<" instead of "<="). However, your video also has a frame rate of only 20 FPS, whereas the recommendation is 24+ FPS, which is why your video is still being optimized. So that is still expected. Apologies for not updating the instructions accordingly.

@felipebochehin87
Copy link

Oh thanks @swissspidy! I'll retest right now :)

@felipebochehin87
Copy link

@swissspidy I uploaded the video below and also got the message:

This video is 1280x720, 120 FPS, 2.12MB. Am I missing anything else?

https://images.zenhubusercontent.com/235435637/43def0d2-6cb2-4650-a18e-f1cd5b913cb3/2022_07_18_09_11_15.mp4

@swissspidy
Copy link
Collaborator Author

@felipebochehin87 Please try again now :-) My fix wasn't uploaded to the QA environment yet when I wrote my comment. But now it's updated there and the video is uploading without optimization.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Group: Media Group: Video Optimization Media transcoding, compression and cropping Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Media: Only optimize videos not matching criteria
4 participants