1 // Thanks: https://github.com/feross/render-media
2 // TODO: use render-media once https://github.com/feross/render-media/issues/32 is fixed
4 import { extname } from 'path'
5 import * as MediaElementWrapper from 'mediasource'
6 import * as videostream from 'videostream'
8 const VIDEOSTREAM_EXTS = [
14 type RenderMediaOptions = {
19 function renderVideo (
21 elem: HTMLVideoElement,
22 opts: RenderMediaOptions,
23 callback: (err: Error, renderer: any) => void
27 return renderMedia(file, elem, opts, callback)
30 function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer: any) => void) {
31 const extension = extname(file.name).toLowerCase()
32 let preparedElem = undefined
36 if (VIDEOSTREAM_EXTS.indexOf(extension) >= 0) {
37 renderer = useVideostream()
39 renderer = useMediaSource()
42 function useVideostream () {
44 preparedElem.addEventListener('error', fallbackToMediaSource)
45 preparedElem.addEventListener('loadstart', onLoadStart)
46 return videostream(file, preparedElem)
49 function useMediaSource () {
51 preparedElem.addEventListener('error', callback)
52 preparedElem.addEventListener('loadstart', onLoadStart)
54 const wrapper = new MediaElementWrapper(preparedElem)
55 const writable = wrapper.createWriteStream(getCodec(file.name))
56 file.createReadStream().pipe(writable)
58 if (currentTime) preparedElem.currentTime = currentTime
63 function fallbackToMediaSource () {
64 preparedElem.removeEventListener('error', fallbackToMediaSource)
69 function prepareElem () {
70 if (preparedElem === undefined) {
73 preparedElem.addEventListener('progress', function () {
74 currentTime = elem.currentTime
79 function onLoadStart () {
80 preparedElem.removeEventListener('loadstart', onLoadStart)
81 if (opts.autoplay) preparedElem.play()
83 callback(null, renderer)
87 function validateFile (file) {
89 throw new Error('file cannot be null or undefined')
91 if (typeof file.name !== 'string') {
92 throw new Error('missing or invalid file.name property')
94 if (typeof file.createReadStream !== 'function') {
95 throw new Error('missing or invalid file.createReadStream property')
99 function getCodec (name: string) {
100 const ext = extname(name).toLowerCase()
102 '.m4a': 'audio/mp4; codecs="mp4a.40.5"',
103 '.m4v': 'video/mp4; codecs="avc1.640029, mp4a.40.5"',
104 '.mkv': 'video/webm; codecs="avc1.640029, mp4a.40.5"',
105 '.mp3': 'audio/mpeg',
106 '.mp4': 'video/mp4; codecs="avc1.640029, mp4a.40.5"',
107 '.webm': 'video/webm; codecs="vorbis, vp8"'