博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
svg与视频结合的镂空效果实践总结
阅读量:6291 次
发布时间:2019-06-22

本文共 958 字,大约阅读时间需要 3 分钟。

关键词:动效 svg video 多端兼容

效果预览

截图见附录,

实现小结

想要说明的主要是两点,一个是svg的运用,另一个是video在移动端的兼容问题。

镂空效果的实现

思路一是用png,优点是简单直接,缺点就是非矢量,可能有锯齿,多端需要多张图;

思路二是用svg,优点是矢量,可以直接用svg标签也可以像图片一样单独引用,缺点就是需要一点学习成本。

显然,这次采用的是思路二,对于svg的本次使用,简单说明下:

由于是全屏半透明“M”镂空,因此首先想到的是有个直接全屏的svg,但是实际要响应多终端,宽高比都不同,一个全屏的svg是不可行的。怎么办呢?利用snap.svg等js库动态创建是不是可以呢?问题是很多时候镂空的图案是特殊的设计图案,一般的程序员想去直接绘制也不太可行。

最后实现是设计师提供一个"M"svg文件,咱们根据屏幕大小实时的补全上边左边右边部分。

对于svg的使用可以单独引用文件也可以嵌入HTML中。

单独引用方法有如下这些:

嵌入HTML中方法:

由于SVG是XML文件,因此可以用任何文本编辑器创建、查看和编辑,当然实际运用中都是用可视化工具创作,例如inkscape、Illustrator等。用文本编辑器打开svg文件,直接复制黏贴到HTML中,然后做些简单的整理可以了。

...

移动端video兼容问题

1,微信内置浏览器自动全屏的问题。

处理方法是在video标签上加x5-playsinline="" playsinline="" webkit-playsinline=""

2,微信内置浏览器z-index不起作用问题。

处理方法是在video便签上加x5-video-player-type="h5"

3,实际中还有各种其他问题,例如自动播放属性设置无效,iOS端编码格式要求等,最后因为业务及时间等因素综合考虑,针对移动触屏端改用图片循环播。

附录:

PC端:
图片描述
图片描述

移动端:

图片描述图片描述

转载地址:http://rrkta.baihongyu.com/

你可能感兴趣的文章
小五思科技术学习笔记之扩展访问列表
查看>>
使用Python脚本检验文件系统数据完整性
查看>>
使用MDT部署Windows Server 2003 R2
查看>>
Redhat as5安装Mysql5.0.28
查看>>
通过TMG发布ActiveSync
查看>>
Web服务器的配置与管理(4) 配置访问权限和安全
查看>>
C#输入法
查看>>
读书笔记:读完互联网测试经验的感受
查看>>
thinkphp中url路由
查看>>
理解面向对象过程中创造一个对象的步骤
查看>>
linux修改进程的名字
查看>>
Oracle 语法
查看>>
【NOI2010】能量采集
查看>>
错误处理和调试2 - C++快速入门31
查看>>
Poj 2299 Ultra-QuickSort
查看>>
SDUT OJ 数据结构实验之链表五:单链表的拆分
查看>>
c语言学习之基础知识点介绍(四):算术运算符和逗号表达式
查看>>
c语言学习之基础知识点介绍(六):if和switch结构
查看>>
elasticsearch 的Merge
查看>>
网络编程
查看>>