混合媒体

上次更新: 2023-11-04
  • 创建对象:
  • Developer
    User

混合媒体查看器是媒体查看器。 它支持包含图像、样本集、旋转集、视频和自适应视频集的媒体集。

查看器底部的缩略图表示每个媒体集元素及其资源类型指示器。 当选择样本集元素时,会出现第二行样本以允许选择样本集中的颜色变化。 图像和样本集元素支持在连续或内联模式下缩放;旋转集支持缩放和旋转。 视频和自适应视频集支持所有基本播放控件,前提是任何可选的隐藏式字幕都显示在视频内容上方。 用户可通过单击全屏按钮随时切换到全屏。 查看器具有可选的关闭按钮。 它设计为可在台式机和移动设备上工作。

只要基础系统支持,混合媒体查看器就会在其默认配置中使用HLS格式的HTML5流视频播放。 在不支持HTML5流式传输的系统上,查看器回退到HTML5渐进式视频交付。

注意

此查看器不支持使用IR(图像渲染)或UGC(用户生成的内容)的图像。

查看器类型505。

请参阅 系统要求和先决条件.

演示URL

https://s7d9.scene7.com/s7viewers/html5/MixedMediaViewer.html?asset=Scene7SharedAssets/Mixed_Media_Set_Sample

使用混合媒体查看器

混合媒体查看器表示一个主JavaScript文件和一组帮助程序文件(单个JavaScript包含此特定查看器使用的所有Viewer SDK组件、资产、CSS),这些文件由查看器在运行时下载。

您可以使用随IS-Viewers提供的生产就绪型HTML页,在弹出模式下使用混合媒体查看器。 或者,您可以在嵌入模式下使用查看器,在该模式下,使用文档记录的API将其集成到目标网页中。

配置查看器和为其设置外观的任务与其他查看器的任务类似。 所有外观设计都是通过自定义CSS实现的。

请参阅 所有查看器通用的命令引用 — 配置属性所有查看器通用的命令引用 — URL

与混合媒体查看器交互

混合媒体查看器支持在其他移动设备应用程序中常见的单点触控和多点触控手势。 当查看器无法处理用户的轻扫手势时,它将事件转发给Web浏览器以执行本机页面滚动。 此功能允许用户在页面中导航,即使查看者占据设备屏幕区域的大部分。

手势

说明

单点按

激活弹出视图或在主缩放级别和次缩放级别之间进行更改。

双击

时间 连续 缩放模式,放大一个级别,直到达到最大缩放比率,下一次双击手势将重置为初始状态。

触摸并按住

时间 内嵌 缩放模式,激活缩放的图像。

捏合

在连续缩放模式下,放大或缩小图像。

水平轻扫或轻扫

当当前资源为旋转集并且图像处于重置状态时,它将水平旋转旋转旋转集。

当当前资源是旋转集或图像并且图像被放大时,它水平移动图像。 如果图像被移动到视图边缘并且仍沿该方向滑动,则手势执行本机页面滚动。

在样本栏中滚动样本列表。

垂直轻扫或轻扫

如果图像处于复位状态,则当使用多维旋转集时,它改变垂直视角。 在一维旋转集中,或者当多维旋转集位于最后一个或第一个轴上以便垂直滑动不会导致垂直视角改变时,该手势执行本机页面滚动。

如果当前资源是旋转集或图像,并且放大了图像,则会垂直移动图像。 如果将图像移动到视图边缘并且仍沿该方向轻扫,则手势将执行本机页面滚动。

如果该手势在样本区域内完成,则会执行本机页面滚动。

该查看器还支持在带有触摸屏和鼠标的Windows设备上输入触摸和鼠标。 但是,此支持仅适用于Chrome、Internet Explorer 11和Edge Web浏览器。

此查看器可使用键盘完全访问。

请参阅 键盘辅助功能和导航.

嵌入混合媒体查看器

不同的网页对查看者的行为具有不同的需求。 有时,网页会提供一个链接,选中该链接后,会在单独的浏览器窗口中打开查看器。 在其他情况下,需要直接将查看器嵌入到托管页面中。 在后一种情况下,网页可能具有静态页面布局,或者使用响应式设计,该设计在不同的设备上或对于不同的浏览器窗口大小显示不同。 为了满足这些需求,查看器支持三种主要操作模式:弹出窗口、固定大小嵌入和响应式设计嵌入。

关于弹出模式

在弹出模式下,查看器将在单独的Web浏览器窗口或选项卡中打开。 它采用整个浏览器窗口区域,并在浏览器调整大小或移动设备的方向更改时进行调整。

弹出模式是移动设备中最常见的一种模式。 网页使用以下方式加载查看器 window.open() JavaScript调用,正确配置 A HTML元素或任何其他适当的方法。

建议您为弹出操作模式使用现成的HTML页面。 在这种情况下,将其命名为 MixedMediaViewer.html 且位于 html5/ 标准IS-Viewers部署的子文件夹:

<s7viewers_root>/html5/MixedMediaViewer.html

您可以通过应用自定义CSS来实现可视化自定义。

以下是在新窗口中打开查看器的HTML代码示例:

<a href="http://s7d1.scene7.com/s7viewers/html5/MixedMediaViewer.html?asset=Scene7SharedAssets/Mixed_Media_Set_Sample" target="_blank">Open popup viewer</a>

关于固定大小和响应式设计嵌入

在嵌入模式下,查看器将添加到现有网页,这些网页可能已有一些与查看器无关的客户内容。 查看者通常只占用网页不动产的一部分。

主要用例是面向台式机或平板电脑设备的网页,以及根据设备类型自动调整布局的响应式设计页面。

当查看器在初始加载后未更改其大小时,使用固定大小嵌入。 此操作是拥有静态布局的网页的最佳选择。

响应式设计嵌入假定查看器必须在运行时调整大小以响应其容器的大小更改 DIV. 最常见的用例是将查看器添加到使用灵活页面布局的网页。

在响应式设计嵌入模式下,查看器的行为方式有所不同,具体取决于网页确定其容器大小的方式 DIV. 如果网页仅设置容器的宽度 DIV如果不限制高度,查看器将根据所用资源的纵横比自动选择高度。 此功能可确保资产完全适合视图,不会出现任何边距。 此用例最常见于使用响应式设计布局框架(如Bootstrap或基础)的网页。

否则,如果网页同时设置了查看器容器的宽度和高度 DIV,则查看器仅填充该区域,并遵循网页布局提供的大小。 一个很好的示例是将查看器嵌入到模式叠加中,其中叠加根据Web浏览器窗口大小调整大小。

固定大小嵌入

通过执行以下操作将查看器添加到网页:

  1. 将查看器JavaScript文件添加到网页。

  2. 定义容器 DIV.

  3. 设置查看器大小。

  4. 创建和初始化查看器。

  5. 将查看器JavaScript文件添加到网页。

    创建查看器需要您在HTML头中添加脚本标记。 在使用查看器API之前,请确保包含 MixedMediaViewer.js. 此 MixedMediaViewer.js 文件位于 html5/js/ 标准IS-Viewers部署的子文件夹:

<s7viewers_root>/html5/js/MixedMediaViewer.js

如果查看器部署在某个Adobe Dynamic Media Classic服务器上,并且来自同一域,则可以使用相对路径。 否则,您需要为其中一台安装了IS-Viewers的Adobe Dynamic Media Classic服务器指定完整路径。

相对路径如下所示:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/MixedMediaViewer.js"></script>
注意

仅引用主查看器JavaScript include 文件上传到您的页面上。 请勿在网页代码中引用任何其他JavaScript文件,这些文件可能会在运行时由查看器的逻辑下载。 特别是,请勿直接引用HTML5 SDK Utils.js 由查看器加载的库,从 /s7viewers 上下文路径(所谓的整合SDK) include)。 原因在于 Utils.js 或者类似的运行时查看器库完全由查看器的逻辑管理,并且查看器版本之间的位置会发生变化。 Adobe不保留辅助查看器的旧版本 includes 在服务器上。

因此,将直接引用放置到任何辅助JavaScript include 将来在部署新产品版本时,页面上查看器使用的功能会中断查看器。

  1. 定义容器DIV。

    向要显示查看器的页面添加一个空DIV元素。 DIV元素必须定义其ID,因为此ID稍后将传递到查看器API。 DIV的大小通过CSS指定。

    占位符DIV是一个定位元素,这意味着 position CSS属性设置为 relativeabsolute.

    确保全屏功能在Internet Explorer中正常工作。 检查以确保DOM中没有其他元素的栈叠顺序高于占位符DIV。

    以下是定义的占位符DIV元素的示例:

    <div id="s7viewer" style="position:relative"></div>
    
  2. 设置查看器大小

    此查看器在处理多项目集时显示缩略图。 在桌面系统上,缩览图位于主视图的下方。 同时,查看器允许在运行时使用交换主资源 setAsset() API。 作为开发人员,当新资产只有一个项目时,您可以控制查看器管理底部缩略图区域的方式。 可以保持外部查看器大小不变,并允许主视图增加其高度并占据缩略图区域。 或者,您可以保持主视图大小为静态并折叠外部查看器区域,使网页内容向上移动。 然后,使用缩略图上留下的自由页房地产。

    要保持外部查看器边界不变,请定义 .s7mixedmediaviewer 顶级CSS类(以绝对单位表示)。 CSS的大小调整可直接放置在HTML页面或自定义查看器CSS文件中,并稍后分配给Dynamic Media Classic中的查看器预设记录,或使用style命令显式传递。

    请参阅 自定义混合媒体查看器 有关使用CSS为查看器设置样式的更多信息。

    以下是在HTML页中定义静态外部查看器大小的示例:

    #s7viewer.s7mixedmediaviewer {
     width: 640px;
     height: 480px;
    }
    

    您可以在下面的示例页面上看到带有固定外部查看器区域的行为。 请注意,在组之间切换时,外部查看器大小不会更改:

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/mixedmedia/MixedMediaViewer-fixed-outer-area.html?lang=zh-Hans

    要使主视图尺寸为静态尺寸,请为内部视图定义以绝对单位表示的查看器大小 Container 使用的SDK组件 .s7mixedmediaviewer .s7container CSS选择器,或使用 stagesize 修饰符。

    以下示例用于定义内部视图的查看器大小 Container SDK组件,以便在切换资产时,主视图区域不会更改其大小:

    #s7viewer.s7mixedmediaviewer .s7container {
     width: 640px;
     height: 480px;
    }
    

    以下示例页面显示了固定主视图大小的查看器行为。 请注意,在页面集之间切换时,主视图将保持静态状态,网页内容将垂直移动:

    https://experienceleague.adobe.com/tools/dynamic-media-demo/viewers-ref/mixedmedia/MixedMediaViewer-fixed-main-view.html?lang=zh-Hans

    您可以设置 stagesize 在Dynamic Media Classic中的查看器预设记录中进行修饰符,或通过查看器初始化代码将其显式传递 params 收藏集。 或者,作为一个API调用,如本帮助的命令参考部分中所述,如下所示:

    mixedMediaViewer.setParam("stagesize", "640,480");
    

    此示例中建议并使用基于CSS的方法。

  3. 创建和初始化查看器。

    完成上述步骤后,您将创建一个实例 s7viewers.MixedMediaViewer 类,将所有配置信息传递到其构造函数,并调用 init() 方法。 配置信息作为JSON对象传递给构造函数。 此对象至少应具有 containerId 保存查看器容器ID名称并嵌套的字段 params 包含查看器支持的配置参数的JSON对象。 在本例中, params 对象必须至少将图像服务URL传递为 serverUrl 属性,作为传递的视频服务器URL videoserverurl 产及初始资产 asset 参数。 基于JSON的初始化API允许您通过一行代码创建和启动查看器。

    必须将查看器容器添加到DOM,以便查看器代码可以按其ID查找容器元素。 某些浏览器会延迟构建DOM,直到网页结尾。 要获得最大的兼容性,请调用 init() 紧靠结束位置之前的方法 BODY 标记上,或主体上 onload() 事件。

    同时,容器元素还不一定是网页布局的一部分。 例如,可以使用隐藏该内容 display:none 为其分配的样式。 在这种情况下,查看器会延迟其初始化过程,直到网页将容器元素带回布局为止。 执行此操作后,查看器加载将自动继续。

    以下示例用于创建查看器实例,将所需的最少配置选项传递给构造函数,并调用 init() 方法。 此示例假定 mixedMediaViewer 是查看器实例; s7viewer 是占位符的名称 DIV; http://s7d1.scene7.com/is/image/ 是图像服务URL; http://s7d1.scene7.com/is/content/ 是视频服务器URL;以及 Scene7SharedAssets/Mixed_Media_Set_Sample 是资产:

<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
<script type="text/javascript">
mixedMediaViewer.init();
</script>

以下代码是一个简单网页的完整示例,该网页以固定大小嵌入混合媒体查看器:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
#s7viewer.s7mixedmediaviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

高度不受限制的响应式嵌入

通过响应式设计嵌入,网页通常具有某种灵活的布局,可指定查看器容器的运行时大小 DIV. 对于以下示例,假设网页允许查看器的容器 DIV 占用Web浏览器窗口大小的40%,高度不受限制。 网页HTML代码如下所示:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

将查看器添加到此类页面与嵌入固定大小的步骤类似。 唯一的区别是,您不需要显式定义查看器大小。

  1. 将查看器JavaScript文件添加到网页。
  2. 定义容器DIV。
  3. 创建和初始化查看器。

上述所有步骤与嵌入固定大小相同。 将容器DIV添加到现有 "holder" 目录 以下代码是一个完整的示例。 请注意当浏览器调整大小时查看器大小如何变化,以及查看器长宽比如何与资源匹配。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

以下示例页面说明了高度不受限制的响应式设计嵌入的更多实际用途:

实时演示

备用演示位置

定义宽度和高度的灵活大小嵌入

如果定义了宽度和高度的灵活大小嵌入,则网页样式会不同。 它提供两种大小到 "holder" DIV,并将其置于浏览器窗口中居中。 此外,该网页还设置 HTMLBODY 元素为100%。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

其余嵌入步骤与用于高度不受限制的响应式设计嵌入的步骤相同。 生成的示例如下:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"Scene7SharedAssets/Mixed_Media_Set_Sample",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

使用基于Setter的API进行嵌入

可以使用基于setter的API和no-args构造函数,而不是使用基于JSON的初始化。 使用此API构造函数不接受任何参数,并且配置参数是使用 setContainerId()setParam()、和 setAsset() API方法,具有单独的JavaScript调用。

以下示例说明了如何将固定大小嵌入与基于setter的API一起使用:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/MixedMediaViewer.js"></script>
<style type="text/css">
#s7viewer.s7mixedmediaviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative"></div>
<script type="text/javascript">
var mixedMediaViewer = new s7viewers.MixedMediaViewer();
mixedMediaViewer.setContainerId("s7viewer");
mixedMediaViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
mixedMediaViewer.setAsset("Scene7SharedAssets/Mixed_Media_Set_Sample");
mixedMediaViewer.init();
</script>
</body>
</html>

在此页面上