krpano教程之字幕添加,配合语音解说滚动字幕
目录
说明:
原理:
效果截图:
步骤及原理:
说明:
krpano字幕是指介绍语音的字幕,字幕随着语音的播放而滚动,随语音暂停而暂停。字幕添加的前提是用之前的方法添加过介绍语音。
原理:
字幕层在溢出隐藏的父元素中向右滑动,当点击声音控制按钮时,字幕位置被固定,再次点击时继续右滑。
效果截图:
步骤及原理:
1.在皮肤.xml文件中添加父元素layer
<!--字幕功能增加-父元素-->
<layer name="skin_subtitles" type="container" visible="true" zorder="100"css="" maskchildren="true"style=" " align="top" edge="bottom" x="5" y="-5" rotate="0.0" width="70%" height="30px" scale="1.0"altscale="1.0" alpha="1.0" bgcolor="0xcccccc" bgalpha="1.0" onclick="" ondown="" onup="" onloaded="" ></layer>
2.为每一个场景添加字幕。
在每一个场景标签<scene>中添加字幕标签,模板为:
<!--字幕-->
<layer name="subtitles_text" url="%SWFPATH%/plugins/textfield.swf" align="right" edge="left" x="-150" y="0" parent="skin_subtitles"html="虚拟现实教学中心通过五大区域形成了课程讲解、沉浸式体验、一键式课程操作、角色扮演互动、课堂效果智能评估等完善的功能框架。"style=""widthss="1400"timess="30"zorder="101" enabled="false" background="false" border="false"visible="true" />
其中自定义的属性及含义为:
parent="skin_subtitles" 定义父元素,将字幕放入第一步定义好的父元素位置。
html=“” 字幕内容,将需要显示的字幕输入,不可以换行。
widthss=“1400” 字幕块的宽,也是字幕停止时,左端点的相对位置。需要手动输入,可通过F12查询字幕快的值。
timess=“30” 介绍音频的长度。需手动输入,就是音频播放时间。用来控制字幕滚动时间。
3.介绍语音控制按钮(暂停/播放按钮)的属性修改
3.1增加属性
tfaaa=“true” 标识字幕显示动态。
3.2 onclick方法中调用字幕控制方法。
原介绍语音控制按钮:
<plugin name="snd" style="skin_base|skin_glow" crop="0|768|64|64" align="righttop" x="15" y="17" scale="0.5" alpha="1"onloaded="if(ismobile,set(scale,1));"onclick="pausesoundtoggle(bggsnd1); switch(crop, 0|768|64|64, 64|768|64|64);"/>
修改后控制按钮:
<plugin name="snd" style="skin_base|skin_glow" crop="0|768|64|64" align="righttop" x="15" y="17" scale="0.5" alpha="1"onloaded="if(ismobile,set(scale,1));" tfaaa="true"onclick="pausesoundtoggle(bggsnd1); switch(crop, 0|768|64|64, 64|768|64|64);subtitles_controller()"/>
字幕控制方法代码:(字幕控制方法代码插入至全局事件下方即可)
<!--字幕控制函数--><action name="subtitles_controller">if(tfaaa,tween(layer[subtitles_text].x,get(layer[subtitles_text].x),0);set(tfaaa,false),mul(mh,layer[subtitles_text].timess,get(layer[subtitles_text].x));div(mh,get(mh),layer[subtitles_text].widthss);sub(mh,layer[subtitles_text].timess,get(mh));mod(md,get(mh),1);sub(mh,get(mh),get(md));tween(layer[subtitles_text].x,get(layer[subtitles_text].widthss),get(mh));set(tfaaa,true););</action>
4.在tour.xml中添加全局事件
<events onremovepano="tween(layer[subtitles_text].x,-150,0.1);" onnewpano="tween(layer[subtitles_text].x,get(layer[subtitles_text].widthss),get(layer[subtitles_text].timess));" />
在切换场景时,上一个场景关闭,将字幕条放在父元素右边固定位置。下一个场景打开时字幕自动向右移。其移动结束位置,和移动时间设置为之前手动输入的数值。
但是场景中全局事件只能有一个,所以需要把这个整合到介绍语音的全局事件内。否则介绍语音不播放。
<events onremovepano="stopsounds();tween(layer[subtitles_text].x,-150,0.1);" onnewpano="automusic();tween(layer[subtitles_text].x,get(layer[subtitles_text].widthss),get(layer[subtitles_text].timess));" />
效果参考资料取自:农业经
krpano教程之字幕添加,配合语音解说滚动字幕相关推荐
- html 滚动字幕如何设置,如何制作滚动字幕 视频画面加滚动字幕,自己设置滚动字幕的显示时间(滚动次数)...
不管是电影还是电视中都经常会出现一些滚动字幕,滚动字幕的内容可以是广告.通知.说明.或者是总结等.视频中的滚动字幕除了起到宣传或提示的作用,更重要的是丰富了视频的层次,让画面更加精美.但有时候我们自己 ...
- android 屏幕滚动字幕,LED灯牌显示屏滚动字幕
LED灯牌显示屏滚动字幕app是一款手机led灯牌工具,直接将手机作为led等,打造喜欢的led滚动效果:在看演唱会的时候,拿起手机就能当led显示灯,完全不用特地准备,还方便携带:并且在制作led灯 ...
- 怎么给视频添加字幕?三款视频字幕添加工具帮你轻松解决
当我们在社交媒体上分享自己制作的视频时,可能会想要为视频添加字幕.因为这可以让观看视频的小伙伴更好地理解和欣赏我们的视频内容,还可以帮助提升我们的影响力和吸引力.但是手动添加字幕可能需要花费大量的时间 ...
- html+视频添加字幕,给视频加滚动字幕,给视频加字幕制作mv 录制的视频配背景音乐...
给视频添加滚动字幕方法其实很简单,像我们下载的电影,歌曲,用手机录制的视频都可以加字幕,或者滚动字幕,也可以加背景音乐或其它声音,给视频开头或结尾加一张图片或多张图片等等都是可以实现的,而这一切都是那 ...
- 同时多个视频剪辑,视频配音频,添加滚动字幕
视频剪辑有很多种,选对方法剪辑视频并不难,像给视频添加滚动字幕,给视频配上喜欢的音频,等等,视频剪辑高手都是可以支持,而且可以同时给多个视频添加上相同的滚动字幕.背景音频,下面就来看看如何操作.希望大 ...
- 如何实现EDIUS中滚动字幕的制作
滚动字幕在各种形式的影片中都用的比较多,后期制作做多了,自然觉得简单无比,但对于新手来说,肯定是陌生的.下面,小编就使用EDIUS给大家介绍两种简单制作滚动字幕的方法. 不管是哪种方法,首先都需要在字 ...
- EDIUS中的滚动字幕是怎么制作的
滚动字幕在各种形式的影片中都用的比较多,后期制作做多了,自然觉得简单无比,但对于新手来说,肯定是陌生的.下面,小编就使用EDIUS给大家介绍两种简单制作滚动字幕的方法. 不管是哪种方法,首先都需要在字 ...
- 新手必备pr 2021快速入门教程「十一」PR字幕添加
PR2021快速入门教程,学完之后,制作抖音视频,vlog,电影混剪,日常记录等不在话下!零基础,欢迎入坑! 本节内容 字幕是整个影视后期处理必不可少的一个重要环节,如今我们生活中随处都可以拍摄各种各 ...
- html给字添加音频,如何给视频加字幕并与语音同步?方法用得好就是这么简单!...
原标题:如何给视频加字幕并与语音同步?方法用得好就是这么简单! 大家好,今天要分享的内容是:如何用爱剪辑给视频加字幕并与语音同步. 在电影.电视剧和一些短视频中,字幕和语音都是同时出现同时消失的.那么 ...
最新文章
- 前期优达无人驾驶对课程评价
- 如何创建 Code Snippet
- 志愿怎么填?洞察应届毕业生就业形式,把握未来求职方向 | 易观千帆行业案例
- 剑桥大学国际学生事务部网站
- 算法学习-莫比乌斯反演
- gitl更新最近代码_常见的蓝屏代码以及解决方法
- Leetcode#832. Flipping an Image(翻转图像)
- Confluence 6 管理协同编辑 - 关于 Synchrony
- 深入hibernate的三种状态
- java Comparable 和 Cloneable接口
- 小程序模仿蚂蚁森林浇水demo,树木浇水
- pytorch和python的区别_Keras和PyTorch的视觉识别与迁移学习对比
- 合规安全大考核:移动应用安全策略全盘点
- 九龙证券“风光储锂芯”集体回暖 创业板指探低回升
- 阿里云服务搭建微信小程序开发环境
- NVT | 67x USB MSDC设备分析
- switch按钮文字切换
- python opencv 凸包 convexHull
- 数据库中五个Key(鍵)的概念区分
- 案例:js简单实现关闭淘宝二维码