网站开发video标签的相关问题和解决办法

建站指南4年前 (2021)发布 Nansir

6,905 0 0

1、

问题详情：Console 异常报错情况：Uncaught (in promise) DOMException:play() failed because the user didn't interact with the document first.

中文翻译的意思是：未捕获（承诺）的DOMException：play()失败，因为用户未首先与文档进行交互。 https://goo.gl/xX8pDD，还给了文档短链接说明了问题，在浏览完谷歌的文档说明后，找到了解决的办法。这里也搜索到 stackoverflow 这个问答社区的解决办法：点击进入stackoverflow。

解决办法：在<video></video>加入muted="muted"即可。示例：

<video title="Advertisement" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay="true" muted="muted"></video>

扩展文章：（1）https://blog.csdn.net/taiyangmiaomiao/article/details/80266625

2、

问题详情：设置正确的访问资源地址后，无法读取视频资源。后台console输出错误为：Uncaught (in promise) DOMException: Failed to load because no supported source was found.

出现这样的结果在网上搜索之后确定一部分原因为：CORS的设置问题，我填写的视频地址是我另外一个三级域名的网站资源地址，所以先按照以下的解决方案修改。

解决办法：https://segmentfault.com/a/1190000012550346（测试中）

方法搬运：在Nginx的配置文件中配置以下参数：（此处的*我设置为三级域名的地址，实际项目不能写*）

location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }
}