Video标签在Safari上空白显示的解决方案

序言：本文演示的项目涉及的技术为Vue+Nginx，理论上解决方法有多种，本文只提供有过项目实战的进行演示。

Vue

在前端页面，我们使用 video 标签，视频地址来自data中的videoUrl

html


<video width="600" height="440"

    loop

    autoplay

    muted

    playsinline>

<source :src="videoUrl"

    type="video/mp4"/>

</video>

javascript


export default {

data() {

return {

videoUrl:'${videoPath}'

        }

    }

}

${videoPath}需要替换为你的视频实际地址，可以是外链（如：example.mp4）

建议video标签搭配source标签使用，source标签内的资源在被请求时，如果未成功获取到资源，会继续向下请求其他source标签请求的资源，若所有source资源请求都失效，也可以做错误捕获返回错误信息给用户。

Nginx


 server {  

        listen       80;  

        server_name  localhost;

        location /videos/ {  

            alias /var/www/html/videos/;  

            # 设置文件类型  

        add_header Content-Type video/mp4;  

        # 支持断点续传  

        add_header Accept-Ranges bytes;  

        # 如果是部分请求，响应 206 状态码  

            autoindex on;  

}

将你的视频上传到服务器目录内，按如上配置的video访问地址是${ip}/videos/${filename}，兼容safari关键在于为断点续传和响应头206状态码的配置：


add_header Content-Type video/mp4;  

# 支持断点续传  

add_header Accept-Ranges bytes;

# 如果是部分请求，响应 206 状态码

通过资料查询，safari请求视频资源时，要求响应头返回206 Partial Content并且分段传输，否则不被safari接受，所以需要在nginx中进行头部的配置

到这里一切似乎已经迎刃而解了，实装、部署、上线，但是很快就会发现safari上显示video依然是一片空白，这个问题困扰了我很久，包括从后端接口返回视频流的方式都无法解决，最后突然想到，视频格式是一直没有注意到的点，也许可以试试在视频格式下手，于是便有了

将mp4转码为mov，并且video标签内的type="video/mp4"不做改变。再次部署上线，打开safari就可以看到，video标签被正确解析并播放视频，问题也算是解决了。

mp4转mov： www.aconvert.com/cn/video/mp…

前端笔记 @Qm 2024/4/15 23:00 Guilin,Guangxi

Video标签在Safari上无法播放或空白显示的解决方案

Video标签在Safari上空白显示的解决方案

Vue

html

javascript

Nginx