Video not showing on Safari

[Itamar Bellaiche]

Hello!

In my oTree app, I want to show a short video (4 seconds long) with the autoplay, mute and loop attributes.

The video is an MP4 file, saved in the static folder.

It works fine on most web browsers, yet it does not work on Safari (when deployed on heroku).

Here is my code in the template:

<video height="300" muted autoplay loop>
          <source src="{{ static 'video1.mp4' }}"/>
</video>

I tried the next code as well (in different combinations), but it still does not work in Safari:

<video height="300" muted autoplay loop playsinline src="{{ static 'video1.mp4' }}">

          <source src="{{ static 'video1.mp4' }}" type="video/mp4"/>
</video>

What should I do?

Thank you very much!

Itamar

[Chris @ oTree]

i doubt it's an otree issue. more likely something about the <video> tag in safari. 

[Chris @ oTree]

It turns out there is an issue with <video> that uses the {{ static }} tag in Safari. It doesn't look straightforward to fix. Try hosting your video files outside of oTree, like on YouTube.

[Itamar Bellaiche]

Hi Chris and everyone,

It tried many different things, and eventually what worked for me is using the <img> tag instead of the <video></video> (for Safari web browser and apple devices).

Thanks for your help,

Itamar

--
You received this message because you are subscribed to a topic in the Google Groups "oTree help & discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/otree/jEYJPkDidf8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/16de219c-b2f1-43f7-ae77-5e5abd4994e4n%40googlegroups.com.