Web视频上添加文字

小编上一篇写到了如何给视频添加图片水印，但是后来遇到的需求是不能给原视频添加水印，怎么办呢，于是乎小编又开始在网上疯狂的寻找资料，只不过小编将找视频水印改成了视频弹幕来搜索，后来还是找到了不少的东西
小编参考的主要内容是一个DanmuPlayer-master的项目，里面提供了很多的插件，讲真的我觉得那个项目很完美，但是直接引用的话是无法在自己的项目中很好的衔接的，于是小编决定深入查看其底层代码
来看代码

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><script src="js/jquery-2.1.4.min.js"></script><script>$(document).ready(function() {$(".danmu-div").click(function() {if($(".danmu-video")[0].paused){                 $(".danmu-video")[0].play();//audio.play();// 播放  $("#ceshi").css('display','block');}else{$(".danmu-video")[0].pause();// 暂停$("#ceshi").css('display','none');} })});function hello() {var t = Math.random()*100;var u = Math.random()*100;$("#ceshi").css('left',t+'%');$("#ceshi").css('top',u+'%');}var t2 = window.setInterval("hello()", 3000);</script><style>.ceshi {top: 50px !important;}#danmup {left: 50%;margin-left: -400px;top: 100px;width: 800px;height: 520px;overflow: hidden;}.danmu-player .danmu-video {width: 100%;height: calc(100% - 45px);}.danmu-player {position: relative;background-color: black;box-shadow: rgb(85 85 85) 0px 0px 3px;font-family: "Microsoft YaHei" !important;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}.danmu-player .danmu-div {left: 0 !important;top: 0 !important;width: 100% !important;height: calc(100% - 45px) !important;z-index: 998 !important;}.danmu-player-full-screen {position: fixed ! important;z-index: 997 ! important;top: 0 ! important;left: 0 ! important;margin: 0 !important;height: 100vh ! important;width: 100vw ! important;}</style></head><body><div id="danmup" class="danmu-player danmu-player-full-screen"><span class="" id="ceshi"style="color: yellow; pointer-events: none; text-shadow: rgb(0, 0, 0) 0px 0px 2px; opacity: 1; white-space: nowrap; font-weight: bold; font-family: SimHei; font-size: 24px; width: 20%; text-align: center; position: absolute;">这是测试弹幕</span><div class="danmu-div" id="danmup-danmu-div"style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 100; color: rgb(255, 255, 255); overflow: hidden;"><div class="danmakuTimer"></div></div><video class="danmu-video" src="level5.mp4" width="800px" height="480px"></video></div></body>
</html>

原理，由于h5提供video标签后，使得在网页上播放视频是一种很简单的事，但是video却也存在局限性，比方全屏的时候，会位于网页最前端，这样自己提供的文字就看不到了，于是就要自己提供一些div，然后自己封装一些按钮之类的，点击按钮使得div全屏，让div中的video的宽度和高度也实现全屏然后就避免了视频在最高层，从而可以使用其他标签在视频上显示的效果

既然做到了视频这块，小编联想到了一个问题，很多有名的视频找不到视频中的链接地址，这是如何实现的呢？敬请期待。

Web视频上添加文字相关推荐

iOS使用AVFoundation在视频上添加字幕以及控制字幕时间
IOS在视频上添加字幕效果的基本思路是: 使用自定义的CATextLayer文字图层或者CAShapeLayer文字图层,添加到视频的Layer上创建用户自定义的字幕效果.这两者的区别是:CAText ...
网页怎么在图片上添加文字_抖音一天可见怎么添加文字-抖音一天可见添加文字文案方法介绍...
抖音一天可见怎么添加文字?在抖音短视频app中,支持用户将自己的日常生活以日常一天可见的形式发布,那我们发布的一天可见视频,怎么添加文字文案呢,抖音一天可见怎么添加文字,下面就和小编一起来看看吧! 1 ...
制作点击文字变颜色_手机照片、视频怎样添加文字？原来很简单，4种方法一分钟搞定...
手机照片.视频怎样添加文字?原来很简单,4种方法一分钟搞定还有3天就到了元旦佳节,相信大家都很开心,美好的假期开始了. 那么可以说是你们元旦必备手机技巧,怎样给照片.视频添加文字,分享4种笔者常用的 ...
怎么去除视频上的文字？一篇教你：视频上的文字水印怎么去除
原创视频更能够吸引人,但是毕竟热点有限,想要随时保持活跃度和吸引力就必须借助更多的视频素材来留住粉丝.但是很多视频素材是有水印.文字.LOGO或者一些图像的,那怎么去除视频上的文字呢?小编一篇简单文章 ...
Gif添加文字怎么操作？如何在线gif动图上添加文字？
想要在gif动图上添加文字,应该怎么实现呢?很简单,只需要使用[GIF中文网]的gif加字(https://www.gif.cn/gifjiazi)功能就能实现,只需上传50M以内的gif动图,就可以 ...
如何在视频里添加文字？3个方法教你给视频添加文字
在现今数字化的社会中,视频已经成为了我们生活和工作中不可或缺的一部分,而在视频制作和编辑过程中,添加文字是一个非常常见的操作,尤其是在一些商业和宣传广告视频中.例如当我们需要制作一个介绍产品或服务的视 ...
opencv怎么在图片上添加文字？
在 OpenCV 中,可以使用 cv2.putText() 函数在图像上添加文本.这个函数需要指定文本.文本位置.字体.字体比例.颜色.线宽等参数. opencv怎么在图片上添加文字? 下面是一个示例 ...
该如何在视频里添加文字呢？推荐3个视频加文字的方法
字幕是一个视频或电影中相当重要的一部分,方便我们更加容易看懂视频所要表达的意思.我们在日常生活中拍摄视频也想添加字幕,那我们该如何在视频里添加文字呢?接下来由我分享几个易上手的方法. 方法一:借助视频 ...
java生成二维码（在图片上生成二维码（二维码带logo）并且在图片上添加文字标签）
1pom.xml  <dependency><groupId>cn.hutool</groupId><artifactId ...
怎么在动态表情包上添加文字,gif添加文字
怎么在动态表情包上添加文字,我们经常看到微信表情包里很多非常有趣的表情包,很多图片或者gif表情包,让简单的图片添加动效文字,视觉效果和传播效果非常好,其实这种图片制作很简单. 下面就给大家演示一下, ...

Web视频上添加文字

Web视频上添加文字相关推荐

最新文章

热门文章