博客地址: 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. PAT甲级——1008 Elevator

    PATA1008 Elevator The highest building in our city has only one elevator. A request list is made up ...

  2. Java集合源码剖析——ArrayList源码剖析

    ArrayList简介 ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ArrayList不是线程安全的,只能用在单线程环境下,多线 ...

  3. Arcpy处理修改shapefile FeatureClass 线要素坐标

    需求:在开发的webgis系统中需要将道路矢量数据与谷歌地图瓦片叠加,谷歌地图瓦片在国家测绘局的要求是进行了偏移处理的,人称“火星坐标系GCJ_02”,道路数据是WGS-84坐标系下的经纬度坐标,现在 ...

  4. 倾斜摄影数据转cesium 3D tiles工具介绍

    软件操作:http://jingyan.baidu.com/article/3aed632e3912c8701080912c.html 软件测试数据: 数据,油库链接: http://pan.baid ...

  5. [LC] 513. Find Bottom Left Tree Value

    Given a binary tree, find the leftmost value in the last row of the tree. Example 1: Input: 2 / \ 1 ...

  6. python语法基础-面向对象-进阶-长期维护

    ###############    @property定义属性    ############## # 所以对于定义属性你有好几种方式了和种类了,# 静态属性,动态属性, # property # ...

  7. easyui自学总结

    1.可拖动 - Draggable 创建一个拖拽元素标记. <div id="dd" class="easyui-draggable" data-opti ...

  8. be accustomed to doing|actual |acute|adapt |

    Sometimes you've got to play a position that you're not accustomedto for 90 minutes, " he said. ...

  9. centos 中文乱码解决办法2

    特别注意:vm10自带虚拟机共享工具,自动识别utf-8格式的中文文件内容 下面步骤摘自网络: 两种方案其实差不多,这里提供两个文件的下载地址,免得去网上搜这两个文件了: fonts-chinese- ...

  10. jmeter常用定时器以及事物控制器

    定时器(并发):Synchronizing Timer 事物控制器: 勾选Generate parent sample当单看主要数据和页面数据性能测试结果还是有比较大的差异的,因而在进行页面性能测试的 ...