work around browser playback restrictions

content/models.py

@@ -202,10 +202,16 @@ class Content(models.Model):
             video_path = self.photo.image.path.replace('.gif', '.mp4')
             image_path = self.photo.image.path.replace('.gif', '.jpg')
             if not os.path.exists(video_path):
+                height = self.photo.image.height
+                if height % 2:
+                    height += 1
                 cmd = [
                     'ffmpeg',
                     '-hide_banner', '-nostats', '-loglevel', 'error',
-                    '-i', self.photo.image.path, video_path
+                    '-i', self.photo.image.path,
+                    '-vf', 'scale=-2:%s' % height,
+                    '-pix_fmt', 'yuv420p',
+                    video_path
                 ]
                 subprocess.call(cmd)
             if not os.path.exists(image_path):
@@ -217,6 +223,11 @@ class Content(models.Model):
                 subprocess.call(cmd)
             return self.photo.image.url.replace('.gif', '.mp4')
 
+    @cached_property
+    def video_gif(self):
+        html = '<video autoplay loop mouted playsinline src="%s" class="gif"></video>' % self.video_url
+        return mark_safe(html)
+
     @cached_property
     def image_url(self):
         if self.photo:

content/templates/base.html

@@ -9,7 +9,7 @@
     <title>CAMP</title>
     {% endblock %}
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans"/>
-    <link rel="stylesheet" type="text/css" href="{% static "css/foundation.css" %}"> 
+    <link rel="stylesheet" type="text/css" href="{% static "css/foundation.css" %}?20250201">
     <link rel="stylesheet" type="text/css" href="{% static "css/jquery.bxslider.css" %}">
     <link rel="stylesheet" type="text/css" href="{% static "css/main.css" %}"> 
     <link rel="stylesheet" type="text/css" href="{% static "css/app.css" %}"> 
@@ -117,6 +117,42 @@
          });
       }
       $(document).ready(loadSlideshow);
+      var restrictedElements = [];
+      function removeBehaviorsRestrictions(event) {
+        if (restrictedElements.length > 0) {
+            var rElements = restrictedElements;
+            restrictedElements = [];
+            rElements.forEach(function(video) {
+                if (video.autoplay && video.paused) {
+                        video.load()
+                        video.play()
+                        if (video.paused) {
+                            restrictedElements.push(video)
+                        }
+                } else if (video.readyState < 4) {
+                    video.load()
+                }
+            });
+        }
+      }
+
+      if (document.querySelector('video')) {
+        let video = document.createElement('video');
+        video.muted = true
+        video.play();
+        if (video.paused) {
+            restrictedElements = document.querySelectorAll('video.gif')
+            window.addEventListener('keydown', removeBehaviorsRestrictions);
+            window.addEventListener('mousedown', removeBehaviorsRestrictions);
+            window.addEventListener('touchstart', removeBehaviorsRestrictions);
+            restrictedElements.forEach(video => {
+                if (!video.poster) {
+                    video.poster = video.src.replace('.mp4', '.jpg')
+                    video.muted = true
+                }
+            })
+        }
+      }
     </script>
   {% block end %}
   {% endblock %}

content/templates/content.html

@@ -7,7 +7,7 @@
     {% include "edit.html" %}
     <div class="large-8 medium-8 columns special-column">
         {% if content.video_url %}
-        <video class="gif" autoplay loop src="{{ content.video_url }}"></video>
+        {{ content.video_gif }}
         {% elif content.image_url %}
         <img src="{{ content.image_url }}">
         {% endif %}

content/templates/event_preview.html

@@ -17,7 +17,7 @@
         <div class="small-6 columns">
             <a href="{{ content.get_absolute_url }}">
                 {% if content.video_url %}
-                <video class="gif" autoplay loop src="{{ content.video_url }}"></video>
+                {{ content.video_gif }}
                 {% else %}
                 <img src="{{ content.image_url }}">
                 {% endif %}

content/templates/featured.html

@@ -1,7 +1,7 @@
 {% for content in featured %}
 <div class="large-8 medium-8 columns special-column">
     {% if content.video_url %}
-    <a href="{{ content.get_absolute_url }}"><video class="gif" autoplay loop src="{{ content.video_url }}"></video></a>
+    <a href="{{ content.get_absolute_url }}">{{ content.video_gif }}</a>
     {% elif content.image_url %}
     <a href="{{ content.get_absolute_url }}"><img src="{{ content.image_url }}"></a>
     {% endif %}

content/templates/preview.html

@@ -11,7 +11,7 @@
     {% else %}
     <div class="small-6 columns">
         {% if content.video_url %}
-        <a href="{{ content.get_absolute_url }}"><video class="gif" autoplay loop src="{{ content.video_url }}"></video></a>
+        <a href="{{ content.get_absolute_url }}">{{ content.video_gif }}</a>
         {% elif content.image_url %}
         <a href="{{ content.get_absolute_url }}"><img src="{{ content.image_url }}"></a>
         {% endif %}

content/templates/results.html

@@ -26,7 +26,7 @@
     <div class="row results">
         <div class="small-6 medium-4 medium-offset-2 large-2 large-offset-2 columns">
             {% if row.video_url %}
-            <a href="{{ row.get_absolute_url }}"><video class="gif" autoplay loop src="{{ row.video_url }}"></video></a>
+            <a href="{{ row.get_absolute_url }}">{{ row.video_gif }}</a>
             {% elif row.image_url %}
             <a href="{{ row.get_absolute_url }}"><img src="{{ row.image_url }}"></a>
             {% else %}

content/templates/section_index.html

@@ -12,7 +12,7 @@
                 {% if content.image_url %}
                 <div class="small-6 columns">
                     {% if content.video_url %}
-                    <video class="gif" autoplay loop src="{{ content.video_url }}"></video>
+                    {{ content.video_gif }}
                     {% elif content.image_url %}
                     <img src="{{ content.image_url }}">
                     {% endif %}