博客地址: https://www.seyana.life/post/19

本来是打算给博客左上角的gif做个优化，

把gif换成webm，以video的形式自动播放，能从180k降到50k，

现在浏览器也都禁止video自动播放，但是允许静音自动播放，也加上了muted

这在chrome没有任何问题，

但是，在safari就没用了，甚至无法加载出来，

除非添加controls属性,但这对于小尺寸展示还加上操作控件，效果可想而知，更何况为了自然点我还ps了好久。

而且使用qq一类的内置浏览器的话，会直接全屏播放，哪怕用了playsinline

有试过用webp，但是就safari不支持，就因为这是google的东西吗？优秀。

目前能想到的就是适配不同对象用js改dom，

但是效益就下去了，懒得折腾了，我选择gif

safari坑之 video的更多相关文章

  1. Safari 不能播放Video ,Chrome等可以 问题解决。

    1  原因分析 https://www.zhihu.com/question/41818719 2 代码实现 1 注意点: 请求时 : header中 range 请求多少长度 代码要返回相应的长度  ...

  2. safari坑之 回弹

    博客地址: https://www.seyana.life/post/20 今天在使用safari浏览博客的时候, 发现在拉至顶部并产生回弹之后,头部导航隐藏了, 除非在上拉的时候,刚好达到顶部而不超 ...

  3. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  4. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...

  5. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  6. 手机浏览器自动播放视频video（设置autoplay无效）的解决方案

    1.问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击. 2.尝试解决 加autopla ...

  7. Web开发者和设计师必须要知道的 iOS 8 十个变化

    原文出处: mobilexweb   译文出处:罗磊(@罗罗磊磊)   欢迎分享原创到伯乐头条 喜大普奔,喜极而泣,喜当爹,随着iPhone 6和iPhone 6 plus的上市,ios 8终于在上周 ...

  8. 2.HTML标签

       <a>      链接标签 1) <a href=“#”>这是个链接</a> 表示空链接 2) 未访问过的链接 显示蓝色字体并带下划线;访问过的链接 显示紫色 ...

  9. HTML5音视频播放(Video,Audio)和常见的坑处理

    1. 前言背景 在HTML5出现之前,Web页面访问音视频主要是通过Flash,Activex插件,还有微软后来推出的silverlight来展现的,尽管FLASH曾经风靡全球,但是随着互联网的不断发 ...

随机推荐

  1. elasticserch-hadoop spak 网络配置异常排查

    elasticserch hadoop 在本地测试写入 elasticsearch:9200时成功 线上环境却报错如下 org.elasticsearch.hadoop.EsHadoopIllegal ...

  2. Django线上部署实战教程之Nginx+Gunicorn+Django篇

    #############################################   推荐 nginx supervisor gunicorn  配置简单,运维方便. Nginx (engi ...

  3. html为什么用雪碧图的优缺点

    CSS Sprite(雪碧图/精灵图) 1          概念解释 将小图标和背景图像合并到一张图片上,然后利用css的背景/定位来显示需要显示的图片部分. 2           优点 ① 减少 ...

  4. IntelliJ IDEA项目断开版本管理解决方案

    今天使用idea时打开项目突然发现项目不受svn管理(项目目录依然受svn管理,只是idea脱管了),如遇到可用以下方法: 图片示例: 1. 2. 希望能帮到你

  5. css3动画贝塞尔曲线cubic-bezier，css3动画的五种情况

    当大家开始做css3动画的时候,了解贝塞尔曲线就成了不可或缺的.“贝赛尔曲线”是由法国数学家Pierre Bézier所发明,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数 ...

  6. linux下如何查看服务器的硬件配置信息

    性能测试时一定要确定测试环境和的硬件配置.软件版本配置,保证和线上一致,才更接近真实环境. 那么linux下如何查看服务器的硬件配置信息?? 一.查看cpu信息 1.所有信息 lscpu [root@ ...

  7. C语言返回值

    C语言函数在结束的时候可以用一个数字表示运行的结果,这个数字就叫做函数的返回值. 主函数应该有一个返回值.如果这个返回值是0就表示程序希望计算机认为它正常结束,如果不是0就表示程序希望计算机认为它是出 ...

  8. 转载【docker】CMD ENTRYPOINT 的使用方法

    原文:https://blog.csdn.net/u010900754/article/details/78526443

  9. 百度AI技术

    利用百度提供接口,实现智能语音 语音合成 -- TTS(text to speech) 注册 在 ai.baidu.com 页面中点击 控制台 ,弹出登陆 / 注册页面 创建应用 登陆成功后,点击左侧 ...

  10. LeetCode Day 7

    LeetCode0012 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 I V X L C D M 数值 1 5 10 50 100 500 1000 例如, 罗马数字 2 ...