原标题:H5秀添加音乐和视频的编辑方式

添加视频和音乐

H5秀添加视频和音乐的方式,无论是在固定页面还是长页面,操作都是相通的。那么本节教程将带你了解在H5秀添加视频和音乐的操作方式。

如何添加视频内容

在H5秀中添加视频,无论是在固定页面还是长页面中,都需要将腾讯视频的通用代码,再添加到秀米视频组件中。

如何在固定页面中添加视频

固定页面中的视频组件,是在左边素材区的页面组件,有一个秀组件按钮,页面中有黑乎乎的组件,就是视频组件:

点击或者拖动它,到编辑区域上,选中视频组件模板,按住组件周边白点,然后拖拽调整组件大小,并放到适合位置上:

调整好视频组件大小以及位置后,再次选中视频组件,会弹出工具条。

在视频工具条上,有一个输入腾讯视频的通用代码的输入框:

然后我们打开腾讯视频网页版,记住是网页版,不是PC客户端,也不是手机APP!

然后会弹出一个页面菜单,其中有一选项是,复制通用代码,它就是我们所需要的通用代码,复制它:

然后再回到H5秀编辑区域上,将通用代码粘贴到视频组件的工具条的输入框中:

如何在长页面中添加视频

长页面中添加视频的方式,与在固定页面中的操作是想通的,不过长页面中的视频组件,是在左边图文排版的视频按钮中,并且有三个视频模板:

将视频模板拖动添加到编辑区域中,同样是选中视频模板,在弹出的工具条上,粘贴腾讯视频的通用代码:

如果要在长页面中调整视频组件的大小,只能借助布局功能,将视频塞到布局里,再调整布局的宽度就好:

如何添加音乐

在H5秀页面中添加音乐,可以给单个页面上设置音乐,也可以给页面上的某个组件元素设置音乐,还可以给整个H5秀设置整体的背景音乐;而音乐来源可以是秀米系统音乐,也可以自己上传的本地音乐。

秀米乐库和音乐上传功能

在H5秀的左边素材区中,最后一个选项是我的音乐,目前分为秀米系统音乐与本地音乐。

秀米系统音乐是按照音乐类型分类好,将光标放在音乐上,右边会有一个播放的按钮,可以播放音乐。

如果秀米乐库里没有想要的音乐,还可以点击右边的本地上传,上传自己准备的音乐内容。

将音乐是上传到秀米乐库中,你需要注意一下秀米等级可上传音乐的容量大小,具体可以查看下面的表格:

秀米等级

乐库容量

等级1(LV1)

可上传1M内、3个音乐

等级2(LV2)

可上传2M内、10个音乐

等级3(LV3)

可上传3M内、20个音乐

等级4(VIP)

可上传10M内、100个音乐

将音乐上传后,我们需要将音乐添加到我们制作好的H5秀中,可以分为以下三种情况:

页面音乐

在H5秀中给某个页面设置单独的音乐,是在页面右边一排标签中的,像齿轮一样的按钮:

在给单个页面设置单独的音乐后,如果后期需要进行修改,可以删除当前页面上的页面,也可以关闭当前页面的背景音乐,来引起读者注意:

这样我们可以给每个页面都设置上单独的音乐,如果想让音乐显示的更好玩点,还可以给页面中的某个元素设置上音乐:

点击播放

点击播放,是在工具条的点击动作按钮中,类型选项中可以切换到播放音乐按钮上:

所以,可以选中页面上的任意组件,然后点击工具条上的小手按钮,设置音乐播放:

之后再预览时,只要点击这个组件,就能够听到你设置的音乐了;但要记得提醒读者,这儿点击可以播放音乐哦!

如果你只需要给制作的H5秀,添加一个整体的音乐,可以这么做:

H5背景音乐

在H5秀编辑区域的顶部,设置标题封面那块上面,有一块是设置背景音乐的框框:

在编辑界面中,点击这块内容中的音乐输入框,再从左边乐库中选择音乐,放到里面就好:

小结

在H5秀添加视频和音乐的方式,无论是在固定页面还是长页面,操作都是相通的。

添加视频内容,需要将腾讯视频的通用代码,放到秀米视频组件中;添加音乐内容,可以给单个页面或页面上的组件设置音乐,也可以给整个H5秀设置整体的背景音乐,而添加的音乐可以是秀米系统音乐,也可以是自己上传的本地音乐;如果是本地音乐内容,需要注意下秀米等级与其上传的音乐容量大小。

H5秀更多的往期教程请点击

责任编辑:

html5中加入音乐怎么弄,H5秀添加音乐和视频的编辑方式相关推荐

  1. 135编辑器html点击图片播放音乐,135微信编辑器怎样添加音乐 135编辑器添加音乐图文教程...

    软件安装:装机软件必备包 关于电脑装机必须的软件,比如windows office系列办公软件.网页浏览器.杀毒软件.安全防护软件.刻录软件.压缩软件.下载工具.多媒体播放软件.多媒体编辑软件.输入法 ...

  2. html中加入音乐播放器,HTML网页添加音乐播放器做背景音乐代码-标签audio

    是 HTML 5 的一个新标签,定义声音,比如音乐或其他音频流. 调用格式: src="http://sc1.111ttt.com/2016/1/02/04/195040016323.mp3 ...

  3. html文件显示controls,html5中设置或返回浏览器应当显示标准的音视频控件的属性controls...

    实例 为视频启动控件:myVid=document.getElementById("video1"); myVid.controls=true; 定义和用法 controls 属性 ...

  4. msn空间中使用电子邮件发日志项和添加音乐播放模块

    一直期望用的哪个日志服务可以只用发邮件就能发贴啦,就在google的writely Document可惜现在偶进不去啦再说是国外的英文界面!有点语言障碍-- 今天添加音乐模块时发现msn也可以用邮件发 ...

  5. html5app大赛,Anyoffice -HTML5大赛 悦心(基于H5开发安卓音乐app)-项目总结

    悦心,一款音乐播放器应用.由"女立方"团队开发.眼下.较为流行的音乐播放器有QQ音乐.网易云音乐.多米音乐等. "悦心"音乐播放器的主要功能,提供音乐数据库,点 ...

  6. H5页面添加音乐播放

    在制作H5页面展示的时候,经常会遇到一些带音乐播放的场景,在右上角还有一个音频按钮,点击切换播放和暂停.其实很简单,只需简单几步就可以完成 html <span id="musicCo ...

  7. 从视频中截取gif怎么弄?三步简单完成视频转gif制作

    电影.电视剧等短视频充斥着我们的生活,很多小伙伴会将这些视频中的有趣画面提取出来做成Gif动画表情包.那么,怎么才能从视频中提取gif动画呢? 一.使用什么工具才能从视频中提取gif呢? 通过使用GI ...

  8. HTML5中如何显示视频HTML5视频播放

    HTML5 规定了一种通过 video 元素来包含视频的标准方法. 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 ...

  9. 【企业电子画册制作】名编辑电子杂志大师教程 | 添加音乐

    在名编辑电子杂志大师中,您有很多种不同的方法在电子杂志里添加音乐文件. 首先,您可以通过背景音乐的形式添加音乐文件: 其次,您可以通过页面插入音乐播放器的形式添加音乐: 最后,您还可以通过添加音乐播放 ...

  10. html5中加入音乐怎么弄,如何在H5页面上添加音乐播放

    在制作网页的时候,经常会遇到一些带音乐播放的场景,作品的右上角有一个音频按钮,会播放音乐,点击切换播放和暂停.下面就讲一讲如何在h5网页上添加音乐播放. 其实是很简单的,只需要简单几步就可以完成了 1 ...

最新文章

  1. 小时代5-perl的INC设置分析
  2. 2020年最畅销的20款电动汽车,特斯拉和五菱你偏向谁?
  3. 用文本指导文本:基于文本的自监督可控文本生成模型
  4. 加强自己的电脑安全决招
  5. linux系统编程练手项目,精选 22 个 C++ 项目,编程小白练手首选!
  6. Linux Ubuntu16.04界面美化
  7. 深度学习《Photo Editing》
  8. mysql数据库管理命令_MySQL数据库管理基本命令
  9. 二分法05:搜索旋转排序数组
  10. Java的GUI学习
  11. python学习笔记 程序执行过程 基本数据类型
  12. 土木学matlab还是python_五行属土的字大全
  13. Python是个什么鬼?为什么那么多工作“会Python优先”?
  14. 周日报名截止,翼支付杯大数据建模大赛16万大奖邀你来!!
  15. 你做过哪些事情让你女朋友感动到哭,这个100%可以做到!
  16. 数商云:补齐数字化短板,农林牧渔供应链升级执行“三步走”
  17. Hive启动报错:java.net.URISyntaxException: Relative path in absolute URI: ${system:user.name%7D
  18. html js表单,HTML HTML 表单 - 闪电教程JSRUN
  19. 三元:将对20万名贫困家庭儿童进行健康扶贫
  20. 沙子是如何变成CPU的

热门文章

  1. 嵌入式Linux移植实验
  2. 《程序员的数学》读书计划
  3. 廖雪峰Python教程练习题
  4. APP扫码登录WEB系统
  5. 北大中文核心期刊目录2021年 无线电电子学、电信技术
  6. python123.io在线编程,详解Python IO编程
  7. 4linux--------操作系统介绍 - 项目前导必备------全栈式开发40
  8. 能自动更新的万能周报模板,有手就会用!
  9. C语言关键字必备练习题
  10. net.sf.jasperreports.engine.util.JRFontNotFoundException: Font 黑体 is not available to the JVM. See