博客地址: 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. CString转换成std::string

    unicode的编码格式: CString strCS; std::string strSTD =  CT2A(strCS.GetBuffer()); 其他的编码格式: CString strCS; ...

  2. Linux下实现与Internet时间同步

    一.Linux下实现与Internet时间同步 1.安装ntp [root@server-2 ~]# yum install -y ntpdate 2.同步时间 // 方式一.使用域名连接,要经过DN ...

  3. 使用yum仅下载不安装

    安装工具 yum install yum-utils yum install yum-plugin-downloadonly yum install yumdownloadonlyyum instal ...

  4. Users组权限Win7虚拟机继承Administrator的个性化设置

    在administrator账号下进行的模板设置,配置文件保存在“C:\Documents and Settings\Administrator”文件夹下的profile里面,但是创建的用户虚拟机获取 ...

  5. POJ-1811-Prime Test（pollard_rho模板，快速找最小素因子）

    题目传送门 sol:Pollard_Rho的模板题,刚看了Pollard_Rho和Miller_Rabin很多原理性的东西看不懂,只是记住了结论勉强能敲代码. Pollard_Rho #include ...

  6. HDU-2138-How many prime numbers(Miller-Rabin新解法)

    题目传送门 sol1:普通判到sqrt(n)的素数判定,不多说了. 素数判定 #include "bits/stdc++.h" using namespace std; bool ...

  7. android apk 文件反编译

    最近,自己坑逼的把一个android 项目修改版本的代码删除了.这个项目居然还没上传到源代码管理器.幸好还有apk文件,修改的代码也不多可以反编译一下. 1.下载 dex2jar  获取源码工具  地 ...

  8. 【JVM】面试题之死锁及问题是怎么定位

    前言 之前面试的时候被问到死锁这块的问题,借着最近学习jvm来总结下死锁相关的知识.如果有地方写的不到位的地方,麻烦读者及时提出,放在评论区,我这边也好及时改正. 回顾 所谓,温故而知新,首先回顾下, ...

  9. Docker私有仓库管理

    docker load -i registry.tar.gz docker run -d -p 5000:5000 --restart=always --name registry -v /opt/m ...

  10. 一些JavaScript中原理的简单实现

    实现一个双向数据绑定 Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.通过这个属性可以实现简单的双向数据绑定,当前版 ...