javascript - 能否实现html原生标签video上播放的视频加水印？

问题描述

问 题

产品昨天新提了一个需求，在app中分享到微信、微博中的H5页面播放视频的时候加上水印，这两天一直在找这个方面的案例，没有找到，中间看到一篇文章写到用canvas画视频到页面上，然后播放按钮、水印等东西都可以加上了，但是只能用PC上和浏览器模拟器下实现，使用手机访问页面canvas是空白的，想咨询一下论坛里各位路过的大神这个需求能否满足，大概是一个什么思路？

补充1：使用position这个试了，在PC和模拟器下都在最外层但是在手机上访问就被video覆盖了，iframe没有测试，回头写个demo看一下能否解决，另外全屏的话也是个问题啊。我记得在微信里面video标签被置顶了；另外手机上浏览视频应该没被转成flash,因为我写了一个video一个canvas,video是正常播放的

补充2：iframe写了demo也是不行，好像在移动端浏览器里video标签的z-index最大，在模拟器下水印在外面，但是在手机上一播放视频就被遮住了。

解决方案

经过与云服务商沟通以及多方位测试：
1.position是一点可能都没有了；
2.有同学提供{ -webkit-transform-style: preserve-3d;}或iframe来实现，经测试无效，video元素在微信中应该是被置顶了，所有样式各种无效，不知道是否是我代码问题，如果有同学测试可以实现请发私信；
3.使用video标签覆盖video标签考虑兼容以及样式的bug问题没有去实验这种可能，感觉即使实现了也会出现很多其他问题。

最后解决办法：交给云服务端处理，运营提供样式在视频推流到云上时添加水印。

吐槽：感觉H5在视频与音频的处理上太弱了，即使提供了video等标签兼容能力还是那么差。

另：小程序中使用video可以添加字幕，已经无力吐槽。

这篇关于javascript - 能否实现html原生标签video上播放的视频加水印？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！