DEV: Add crossOrigin to video tag (#20617)

* DEV: Add crossOrigin to video tag

This is a follow-up commit to f144c64e139e41f176ea2ec3433a468fa49b955f
which enables the ability to generate thumbnail images for video
uploads.

In order for the html5 canvas element to create an image or blob the
source video element needs to to have the crossOrigin attribute set to
"anonymous" because a cdn is likely being used in production
environments.

We are already doing something similar in
e292c45924/app/assets/javascripts/discourse/app/lib/update-tab-count.js (L63)
This commit is contained in:
Blake Erickson 2023-03-09 13:19:19 -07:00 committed by GitHub
parent e292c45924
commit f6063c684b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions

View File

@ -1048,7 +1048,7 @@ eviltrout</p>
assert.cooked(
"![baby shark|video](upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4)",
`<p><div class="video-container">
<video width="100%" height="100%" preload="metadata" controls>
<video width="100%" height="100%" preload="metadata" crossorigin="anonymous" controls>
<source src="/404" data-orig-src="upload://eyPnj7UzkU0AkGkx2dx8G4YM1Jx.mp4">
<a href="/404">/404</a>
</video>
@ -1074,7 +1074,7 @@ eviltrout</p>
lookupUploadUrls,
},
`<p><div class="video-container">
<video width="100%" height="100%" preload="metadata" controls>
<video width="100%" height="100%" preload="metadata" crossorigin="anonymous" controls>
<source src="/secure-uploads/original/3X/c/b/test.mp4">
<a href="/secure-uploads/original/3X/c/b/test.mp4">/secure-uploads/original/3X/c/b/test.mp4</a>
</video>

View File

@ -160,7 +160,7 @@ function videoHTML(token) {
const origSrc = token.attrGet("data-orig-src");
const dataOrigSrcAttr = origSrc !== null ? `data-orig-src="${origSrc}"` : "";
return `<div class="video-container">
<video width="100%" height="100%" preload="metadata" controls>
<video width="100%" height="100%" preload="metadata" crossOrigin="anonymous" controls>
<source src="${src}" ${dataOrigSrcAttr}>
<a href="${src}">${src}</a>
</video>