Vue/HTML5/Safari-视频can'；不在safari上显示，但在Chrome上显示

我正在使用Django+Vue.js构建一个showcase网站。 我所有的视频都在chrome上完美运行。但safari和iPhone根本不起作用。 服务器响应状态499

我曾经使用来自其他域的视频，它可以正常工作（我复制了FacebookCDN上的视频链接depoloy），但它的url过期了。所以我下载了视频并使用它。 然而，噩梦开始了

我的服务器上有静态视频。 html:

---

如果还有其他我可以提供的。让我知道。

我只是想买一个低挂的水果，我们谈论的是iphone/safari。您可以尝试将您的文件

/media/Poop Hat.mp4

重命名为

/media/Poop_Hat.mp4

，因为空格和html编码以及其他内容并不总是在所有浏览器中都能完美工作。@ippi感谢您的快速回复和所有帮助。我来修这个。然而，这不是主要问题。因为我有很多视频，其中一些不包括间距。而那些视频也没有显示出来。只想看看悬垂的果实，我们谈论的是iphone/safari。您可以尝试将您的文件

/media/Poop Hat.mp4

重命名为

/media/Poop_Hat.mp4

，因为空格和html编码以及其他内容并不总是在所有浏览器中都能完美工作。@ippi感谢您的快速回复和所有帮助。我来修这个。然而，这不是主要问题。因为我有很多视频，其中一些不包括间距。那些视频也没有显示。

<div id="filters" class='filters row'>
    <section class='filter col s6 m4 l3'
        v-for="filter in filters_data"
    >
        <video muted='true' loop='true' autoplay>
            <source class="demo" v-if='filter.demo_replace == null' :src="filter.demo">
            <source v-else class="replace_demo" :src="filter.demo_replace">
        </video>
        <a :href="filter.link">
            <div class='filter-info'>
                <img class='avatar' :src="filter.avatar" alt="">
                <h3>[[filter.name]]</h3>
            </div>
        </a>
    </section>
</div>

<section class="filter col s6 m4 l3">
   <video muted="muted" loop="loop" autoplay="autoplay">
      <source src="/media/Poop Hat.mp4" class="demo">
   </video>
   <a href="https://www.instagram.com/ar/3339649326099588">
      <div class="filter-info">
         <img src="https://scontent.fkhh1-1.fna.fbcdn.net/v/t39.10260-6/105918489_590471668536013_898732822726448347_n.png?_nc_cat=102&amp;_nc_sid=df6b83&amp;_nc_ohc=XB8y_mkhow8AX-Q_FyZ&amp;_nc_ht=scontent.fkhh1-1.fna&amp;oh=c6f78dab6ac3cc59f4c2bd7f522250f1&amp;oe=5F26E3D0" alt="" class="avatar"> 
         <h3>Poop Hat</h3>
      </div>
   </a>
</section>

var app = new Vue({
delimiters:['[[', ']]'],
el: '#filters',
http: {
  root: './root', 
  headers: {
    'Content-Range': 'bytes=0-3549043', 
    'Accept-Ranges': 'bytes',
    'Content-Type': 'video/mp4'
  }
},
data: {
    'message':'hello',
    'filters_data': []
},
mounted () {
  axios
    .get('filters/api/filters/')
    .then(response => {
        let data = response.data
        for (var i = data.length - 1; i >= 0; i--) {
        data[i].demo = "/media/" + data[i].name + ".mp4"
        data[i].link = "https://www.instagram.com/ar/"+data[i].link.split('/')[6] 
            this.filters_data.push(data[i]);
        }
        
    })
    .catch(function (error) { // 请求失败处理
      console.log(error);
    });
}});