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

建站指南 1年前 (2021) Nansir
1,397 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;
    }
}
版权声明:Nansir 发表于 2021年4月29日 am10:52。
转载请注明:网站开发video标签的相关问题和解决办法 | 知晓天下

相关文章

暂无评论

暂无评论...