产品昨天新提了一个需求，在app中分享到微信、微博中的H5页面播放视频的时候加上水印，这两天一直在找这个方面的案例，没有找到，中间看到一篇文章写到用canvas画视频到页面上，然后播放按钮、水印等东西都可以加上了，但是只能用PC上和浏览器模拟器下实现，使用手机访问页面canvas是空白的，想咨询一下论坛里各位路过的大神这个需求能否满足，大概是一个什么思路？
补充1：使用position这个试了，在PC和模拟器下都在最外层但是在手机上访问就被video覆盖了，iframe没有测试，回头写个demo看一下能否解决，另外全屏的话也是个问题啊。我记得在微信里面video标签被置顶了；另外手机上浏览视频应该没被转成flash,因为我写了一个video一个canvas,video是正常播放的
补充2：iframe写了demo也是不行，好像在移动端浏览器里video标签的z-index最大，在模拟器下水印在外面，但是在手机上一播放视频就被遮住了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
6
851
收藏
经过与云服务商沟通以及多方位测试：
1.position是一点可能都没有了；
2.有同学提供{ -webkit-transform-style: preserve-3d;}或iframe来实现，经测试无效，video元素在微信中应该是被置顶了，所有样式各种无效，不知道是否是我代码问题，如果有同学测试可以实现请发私信；
3.使用video标签覆盖video标签考虑兼容以及样式的bug问题没有去实验这种可能，感觉即使实现了也会出现很多其他问题。
最后解决办法：交给云服务端处理，运营提供样式在视频推流到云上时添加水印。
吐槽：感觉H5在视频与音频的处理上太弱了，即使提供了video等标签兼容能力还是那么差。
另：小程序中使用video可以添加字幕，已经无力吐槽。
难道不是用position:absolute定位一个水印层？
canvas标签只能绘制video与img。
手机访问canvas是空白，是不是当前内核致使视频播放器采用了flash？
如果这样，就如一楼，绝对定位。
iframe呢。这个层级呢?
给iframe这类的加css3的tranform超越z-index的限制呢？
试试这个呢
video { -webkit-transform-style: preserve-3d;}
既然用其它元素不能把video盖住。那提供一个思路，把水印也用 video 呈现，自动播放定格到某一个画面，不让用户手动操作。video总能把video盖住吧。（题主可以试试）
至于全屏的实现，可以尝试不把video全屏，而把video的wrapper全屏。