博客地址: 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. 安装php7.2

    1,yum源默认的版本太低了,手动安装有一些麻烦,所以可以采用yum的方式进行安装. 2,检查当前安装的PHP包yum list installed | grep php 如果有安装的PHP包,先删除 ...

  2. Invert Binary Tree(easy)

    1.直接把递归把左右子树翻转即可 AC代码: /** * Definition for a binary tree node. * struct TreeNode { * int val; * Tre ...

  3. python学习笔记（23）-异常处理

    #异常处理与调试 #异常:在运行代码过程中遇到的任何错误,带有error字样的都是异常 #异常处理,对代码中所有可能出现的异常进行的处理 #1.处理某个错误 2,处理某个类型的错误 3 有错就抓 一. ...

  4. Create Access Point on Archlinux

    Create Access Point on Archlinux */--> Create Access Point on Archlinux 1 Solution Download creat ...

  5. The file named error_log is too large

    The file named errorlog is too large */--> The file named errorlog is too large 1 Problem One day ...

  6. es 查询分词字段为空的数据

    { "query": { "bool" : { "filter" : { "script" : { "scri ...

  7. linux openjdk安装

    sudo apt-get install openjdk-8-jdk 默认提示是 sudo apt-get install openjdk-8-jre, 这个只有jre https://openjdk ...

  8. python中编码判断

    https://www.cnblogs.com/lc-D-a/p/6074878.html python3 用isinstance()检查unicode编码报错

  9. Docker的网络类型

    四种网络类型: None:不为容器配置任何网络功能,--net=noneContainer:与另一个运行中的容器共享Network Namespace,--net=container:containe ...

  10. restful 和RPC 的区别

    https://www.cnblogs.com/Dong-Ge/articles/9577019.html