diff --git a/src/ContentMessages.ts b/src/ContentMessages.ts index 09b080496db..9a6d4da1006 100644 --- a/src/ContentMessages.ts +++ b/src/ContentMessages.ts @@ -292,7 +292,14 @@ function loadVideoElement(videoFile): Promise { reject(e); }; - video.src = ev.target.result as string; + let dataUrl = ev.target.result as string; + // Chrome chokes on quicktime but likes mp4, and `file.type` is + // read only, so do this horrible hack to unbreak quicktime + if (dataUrl.startsWith("data:video/quicktime;")) { + dataUrl = dataUrl.replace("data:video/quicktime;", "data:video/mp4;"); + } + + video.src = dataUrl; video.load(); video.play(); }; diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx index 1b6bafd7d93..96516138a09 100644 --- a/src/components/views/messages/MVideoBody.tsx +++ b/src/components/views/messages/MVideoBody.tsx @@ -190,12 +190,21 @@ export default class MVideoBody extends React.PureComponent } else { logger.log("NOT preloading video"); const content = this.props.mxEvent.getContent(); + + let mimetype = content?.info?.mimetype; + + // clobber quicktime muxed files to be considered MP4 so browsers + // are willing to play them + if (mimetype == "video/quicktime") { + mimetype = "video/mp4"; + } + this.setState({ // For Chrome and Electron, we need to set some non-empty `src` to // enable the play button. Firefox does not seem to care either // way, so it's fine to do for all browsers. - decryptedUrl: `data:${content?.info?.mimetype},`, - decryptedThumbnailUrl: thumbnailUrl || `data:${content?.info?.mimetype},`, + decryptedUrl: `data:${mimetype},`, + decryptedThumbnailUrl: thumbnailUrl || `data:${mimetype},`, decryptedBlob: null, }); }