SVG黑科技排版 | 竖版视频遮罩
模板效果
模板代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
<title>公众号：懂点君</title>
<style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0;}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important;}</style>
</head>
<body>
<div class="rich_media_content" style="visibility: visible;">
<section style="overflow: hidden;background-color: #000;" data-weixin="dong_dian_jun" data-copyright="懂点君">
<!-- 零高容器 -->
<section style="height:0;" data-weixin="dong_dian_jun" data-copyright="懂点君">
<!-- 占位容器 -->
<section>
<svg style="display: inline-block;width: 100%;weixin: dong_dian_jun;vertical-align: top;pointer-events: none;-webkit-tap-highlight-color: transparent;-webkit-user-select: none;" viewBox="0 0 1080 614"></svg>
</section>
<!-- 视频容器 -->
<section style="transform: translate(-8px, 0px) rotate(90deg) scale(1.55);">
<iframe class="video_iframe rich_pages wx_video_iframe" data-vidtype="2" data-mpvid="wxv_2260534184538734602" data-cover="http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FJpraGu7eGqRmOaBaia3iaxMqIkdn7q5QVkwLEMCjJkrZEQVNgeteeIv2L3pkc0KF4tPDvycibBdYcIZzJz90FyhAA%2F0%3Fwx_fmt%3Djpeg" allowfullscreen="" frameborder="0" data-ratio="1.7763157894736843" data-w="1080" width="578" height="325" src="/cgi-bin/readtemplate?t=tmpl/video_tmpl&vid=wxv_2260534184538734602"></iframe>
</section>
</section>
<!-- 图片遮罩容器 -->
<section style="transform: scale(1) translateZ(10px);pointer-events: none;" data-weixin="dong_dian_jun" data-copyright="懂点君">
<svg data-copyright="懂点君" style="display: inline-block;width: 100%;background-position: 0 0;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRmOaBaia3iaxMqIkdn7q5QVkzIe7AhrGxWt07we0VFXRiant3SGUttTVmZjMvSCh2CK6LF6CeXfkMDQ/0?wx_fmt=png);vertical-align: top;pointer-events: none;weixin: dong_dian_jun;user-select: none;-webkit-tap-highlight-color: transparent;" version="1.1" viewBox="0 0 1080 1920" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"></svg>
</section>
</section>
</div>
</body>
</html>
模板分析
- 先构建两个容器，一个是图片遮罩容器，一个是零高容器，用于放置视频；
- 图片遮罩容器的层级一定要高于零高容器，因此使用了CSS3属性transform: scale(1) translateZ(10px)提高层级，其中translateZ(10px)属性值能够解决安卓系统播放视频时视频层级高于图片遮罩容器的问题，换句话说解决了播放视频时图片遮罩容器盖不住视频的问题；
- 图片遮罩容器完全盖住视频后，需要设置图片遮罩容器不能成为事件的目标，点击事件才可以穿透过去，因此设置了pointer-events: none属性；
- 视频容器通过CSS3属性transform: translate(-8px, 0px) rotate(90deg) scale(1.55)来控制视频的位移、旋转、缩放，因为上传视频之前做了逆时针旋转90度（使用格式化工厂把竖屏逆时针转成横屏），所以需要使用rotate属性值把视频顺时针旋转90度，才能达到竖版的状态；
强力驱动