Meteor Safari Video Wont Display

Question

I am not sure if this has always been an issue, but simple html5 videos simply will not display for me in Safari. Both mobile and desktop.

I have gone so far as to install Meteor fresh, and add both a local mp4 file and webm file and even tried a know working video file from here: https://www.w3schools.com/html/html5_video.asp

I have used the identical html5 video code from other frameworks and static html (all that work on those platforms) but alas they do not work either.

There are no errors to speak of (console or terminal) and everything else works/loads fine.

Give it a shot. Add a new meteor install and add the following html5 video:

<video playsinline autoplay muted loop> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> </video>

Any assistance would be greatly appreciated!

Answer 1

Safari seems to choke on rendering the video without controls. I was able to make it work by manually creating the video element (sub-optimal)

Template.video.onRendered(function () {
  const instance = this
  const parent = instance.find('#video-parent')
  instance.video = document.createElement('video')
  instance.video.classList.add('rounded-lg')
  instance.video.classList.add('img-fluid')
  instance.video.src = instance.data.src ? instance.data.src : ''
  instance.video.addEventListener('canplaythrough', () => {
    console.log(instance.video)
    instance.video.controls = true
    //Meteor.setTimeout(()=>{
    //  instance.video.play()
    //}, 500)
  })
  parent.append(instance.video)
})
Template.video.onDestroyed(function () {
  const instance = this
  instance.video.pause()
  instance.video.remove()
})

with

<template name="video">
 <div id="video-parent"></div>
</template>

<template name+"something">
 {{>video src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4"}}
</template>