Hype

Hype中文官网 > 新手入门 > 基础教程:Hype 4元素面板 — 视频专有属性

基础教程:Hype 4元素面板 — 视频专有属性

发布时间:2020/12/15

从本章节开始,将讲述Hype 4交互动效制作软件元素面板中针对某些元素的专有属性设置,具有专有属性的元素包括有:视频、多边形、矢量形状和铅笔。本章节详细讲解Hype 4 H5创作工具中的视频专有属性设置。

  1. 一、视频属性设置界面

当在场景中添加了视频元素后,在元素面板中才会出现视频属性的设置界面。视频属性界面由三部分组成:视频来源、支持的视频格式和属性选项。

此外,软件还自动建立了一个来源组,来源组以视频的名称命名。每个来源组包含了三种视频格式,例如加载了MP4的视频,就会在MP4后面注明视频的名称。这些信息都可以在资源面板中看到并且管理。

视频属性设置界面
图1:视频属性设置界面
  1. 1、视频来源选项

点击“来源组”选择方框,选择“无”表示不选择任何来源组,场景留下了没有视频的视频框架;选择“添加视频文件”,在“访达”弹出窗口可以选择添加新的视频,并建立新的来源组;选择“显示资源库”,会打开资源库面板,可以对来源组进行增加或者删除等管理。

此外,还可以选择不同的来源组,更换场景中的视频。想要一起尝试的小伙伴们可以点击Hype下载

视频来源选项
图2:视频来源选项
  1. 2、支持的视频格式

在“来源组”的下方有三种视频格式:MP4、OGV和WebM,表示Hype 4的视频元素支持播放这三种格式的视频。但是,不代表着所有浏览器都支持播放这三种格式的视频。一般而言,现在的浏览器都支持MP4格式的视频。图3为浏览器对视频格式的兼容性列表。

浏览器视频格式兼容性列表
图3:浏览器视频格式兼容性列表

在每种视频格式的右边都有一个“选取”按钮,点击“选取”按钮,可以在“访达”弹出窗口选择需要的视频,替代来源组中对应格式的原视频。这里要注意的是,来源组的名称还是原视频的名称,但是里面的视频已经被替换掉了,视频名称与来源组名称不一致了。

选择新视频替代来源组中的视频
图4:选择新视频替代来源组中的视频
  1. 3、属性选项

Hype 4中视频元素有五个属性:

自动播放(autoplay):如果选择该属性,则视频在就绪后马上播放。

内嵌:在iOS系统的APP嵌入视频自动播放或者在iOS的Safari浏览器中自动播放,则需要选择这个属性。

静音(muted):如果选择该属性,视频的音频输出为静音。

循环(loop):如果选择该属性,则当视频文件完成播放后再次开始播放。

控件(controls):如果选择该属性,则向用户显示控件,比如播放按钮等。

视频元素属性设置
图5:视频元素属性设置
  1. 二、视频属性设置与浏览器的关系

由于浏览器的兼容性问题,并不是选择了视频元素的某一个属性便可以实现——例如单独选择了自动播放,在Chrome浏览器就不能够使视频自动播放。

在视频属性的界面右边有一个黄色三角形符号,点击这个符号,在弹出框内显示浏览器对视频属性的兼容性问题。

视频属性的兼容性问题
图6:视频属性的兼容性问题

在默认状态下,视频属性选择了自动播放和控件,意味着视频如果不能自动播放,可以通过点击控件按钮控制视频进行播放。这是最兼容的属性选择方法。

在Chrome浏览器,如果需要自动播放又不需要控件怎么办,那么只能同时选择自动播放和静音两个属性。下面列举了三大浏览器自动播放的要求。

Mac OS Safari浏览器:只需要选择自动播放即可。

Chrome和Firefox浏览器:需要同时选择自动播放和静音。

iOS Safari浏览器和APP:需要同时选择自动播放、内嵌。

视频自动播放的兼容性问题
图7:视频自动播放的兼容性问题
  1. 三、小结

MP4格式的视频基本都能兼容所有浏览器,要注意的是视频播放控制属性的兼容性问题。为了兼容所有浏览器,可以选择自动播放和控件两个属性来控制视频在浏览器中的播放。

作者:东佛

标签:视频视频属性支持视频格式

读者也访问过这里:
Hype中文版
创建漂亮的HTML5网页内容
立即购买
QQ 群
官方交流群:1046763737 立即加群
kefu@makeding.com
热门文章
H5制作软件Hype导出功能详解
Hype是一款Mac端网页制作工具,它可以通过时间线录制功能制作各种各样的网页炫酷动画效果,同时也支持使用物理引擎制作动画。当然,它的强大不仅仅体现于动画制作方面,它的导出功能同样也是功能齐全,下面小编就通过使用Hype 4版本,为大家详细介绍下这款H5制作软件的导出功能。
2020-06-05
Hype软件持久符号的应用
Hype是一款支持无代码创作炫酷网页的Mac端应用软件,它支持各种动画、元素。其中有一个强大的符号功能,该功能分为基本符号和持久符号两种,本文中,小编将使用Hype 4版本,为大家演示和讲解Hype中的持久符号。
2020-06-04
基础教程:Hype 4软件界面介绍
Hype是一款基于MacOS系统的交互动效制作软件,延续了苹果软件的简洁风格,与Keynote软件的界面基本一致。
2020-07-23
UI动效设计工具Hype的响应式布局及设置
响应式布局可以使用户的网页在各种尺寸的屏幕上都能够较好地兼容,不会因为屏幕尺寸大小变化导致网页拉伸变形。Hype就支持这种响应式布局,它允许设计者为单个场景创建多个布局,当用户在浏览器中显示页面时,Hype将根据设备的当前宽度动态加载合适的布局。
2020-05-21
使用Hype进行动画制作的入门介绍
在一个网页中,如果多了一些动态元素的呈现,会使页面看起来更显得高大上一些。而Hype使用功能强大的动画系统,利用时间线录制功能,使制作者制作动画变得轻而易举。
2020-05-21
基础教程:Hype 4入门基础
Hype是一款在MacOS系统下无代码的交互动效制作软件,是一个创作网页的技术平台。通过这个技术平台创作出来的内容,在后台会自动生成代码,可以直接在网上通过浏览器、移动设备等浏览使用。
2020-07-20