问题标签 [smil]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4937 浏览

video-streaming - 使用带有 jw 播放器的动态 smil 文件

我正在尝试使用 JW Player 6 制作在线流媒体播放器。

如果我创建一个包含所有质量版本的流的 smil 文件并使用下面的代码,它可以正常工作:

smil 文件:

我想根据用户的质量选择动态创建 smil 文件。(即:丢弃高于 720 的比特率)

我使用了一个asp文件来动态创建smil文件,但它没有工作:

错误:加载播放器时出错:找不到可播放的源

当然,我在 asp 文件中将标头类型设置为application/octet-stream但没有解决问题。

我还尝试使用 smil 扩展名保存相同的 asp 文件,然后在 IIS 设置中为 smil 文件设置 asp 处理程序。当我在浏览器中调用时它运行良好,但 jw 播放器显示相同的错误。

有什么建议吗?

谢谢。

0 投票
1 回答
1321 浏览

video-streaming - 使用 smil 文件更改 JW Player 中的名称质量

我有一个用于 jw player 6 的 smil 文件。

这是它在播放器上的外观

这是它在播放器上的外观

如何在 JW 播放器中显示 High/Med/Low 而不是 540p/320p?我尝试在 smil 文件的视频节点中添加名称、标题和标签参数,但没有奏效。

有什么建议吗?

谢谢

0 投票
1 回答
961 浏览

javascript - 内联 SVG 动画最佳实践

为内联 SVG 设置动画的方法是什么?!我想在路径上做一些动画。就像在某些事件上旋转一样,多条路径上的 animateMotion 也由某些事件触发。

我将包含一个指向开发站点的链接:http ://www.myradon.net 。我正在尝试完成以下工作;

当电源插头(就在“投资组合”上方)连接到女性(现在在网站中连接)时,较粗的破折号将从页面的顶部一直移动到页面的底部(当前可视化)。我正在考虑这些虚线上的路径动画(因此速度取决于路径的长度,并且应该在前一个结束时开始)。虚线是 jQuery 在 Ajax 调用中插入的十几个 SVG。

有人对如何处理这个问题有一些好主意吗?SMIL、Raphael/D3.js(SVG 已经在 DOM 中)?编辑:顺便说一句,我不关心 IE8 和更少。

0 投票
1 回答
3281 浏览

java - Android开发中如何使用SMIL文件

我的要求是在 android 平台上制作基于 SMIL 语言的媒体播放器,是否可以在 android 中使用 SMIL 文件?

谢谢建议

0 投票
1 回答
249 浏览

css - 同步不同浏览器窗口中的动画

我正在开发一个将显示一种动画幻灯片的应用程序。多台显示器将显示不同但相关的动画,由同一台计算机控制。

动画必须在不同的监视器上同步。也就是说,在监视器 A 上,一个元素将开始移动,而在监视器 B 上,一个完全不同的元素将开始移动,而且这些显然必须同时发生。

我的假设是我们将为每个监视器使用不同的浏览器窗口。

使用超时来让动画同时触发很容易——我将当前时间与预定时间进行比较,然后等待那个毫秒数。方法顶部的 console.log() 显示两个方法在 1 或 2 毫秒内触发。但是,动画不会同时发生。目测它,一个比另一个落后三分之一秒。哪个是第一个,哪个是最后一个是不一致的。(仅供参考,这些是 CSS3 动画。)

那么,如果 setTimeout 不这样做,还有哪些其他选项呢?

我应该转向 SVG/SMIL 吗?我们可以选择我们正在运行的浏览器。

或者,让浏览器窗口跨越所有显示器的简单解决方案是什么?

0 投票
1 回答
1377 浏览

javascript - 在显示的 EPUB3 电子书中嵌入 Javascript 使 iBooks 翻页(在回流模式下)

我已经开发了一个库(我将很快在 BSD/MIT 许可下发布)来模拟 Apple iBooks 中可重排 EPUB3 电子书的媒体覆盖支持(又名“大声朗读”或“SMIL”)。(我提醒您,iBooks 仅在 FXL 布局模式下支持 MO,与 Readium 或 Azardi 不同。)

当当前活动的 SMIL 片段离开当前页面并转到下一个页面时,我想让 iBooks “翻页”。为此,我需要:

1)意识到活动片段已经超出了当前页面,2)强制翻页。

第一点可以(繁琐地)通过计算 SMIL 元素偏移量来实现;我被困在表演2)。

在 Apple 的 ibooks.js 中没有任何帮助,并且注入 TouchEvent 似乎不起作用,因为它们被报告给活动文档而不是“主机 WebKit”。

任何想法如何使 iBooks 从当前显示的 EPUB3 可重排电子书加载的 JS 中翻页?

编辑:在这个问题之后,我在这里发布了上述 JS:https ://github.com/pettarin/rb_smil_emulator

0 投票
3 回答
2433 浏览

javascript - 捕捉 SVG 元素圆上的变化并通过 js 更改其他地方的属性

我在 HTML 文档中嵌入了 SVG。(SVG)圆使用<animate>. 我试图找到一种方法,仅当它水平移动时才将某种事件侦听器放在那个圆圈上。

移动(水平)后,我想找到圆形的 x 坐标,并将第三个(外部)矩形宽度设置为圆形的相对位置。这第三个矩形就像一个进度条,跟踪圆圈的水平进度。

SVG圆圈(顺便说一下,圆圈在SVG g组内)是否被触发某种事件移动我可以设置一个侦听器,以便我可以更改进度条的宽度属性?

我曾认为,如果<animate>移动/更改的元素或元素触发某种事件,我可以尝试捕捉它,然后更改栏的宽度。

我发现在矩形上使用“独立”动画效果并不好,因为当圆圈向上移动时,增长的速度非常不同。我没有使用 canvas 元素,因为我试图保持可伸缩性和形状语义。(我更喜欢 javascript 解决方案,但我会感谢其他方法。)

回答后编辑:分析器非常适合 piint 并且(我认为)很有帮助。我对 SVG 很陌生,我可能误解了一些东西。出于这个原因,我包括代码。

我已尝试实施您的建议,但似乎没有成功。应用于圆圈的 .cx.animVal.value 似乎没有得到我需要的东西。我将包含我的代码的截断版本,它应该沿着本身水平移动的路径移动球;两个矩形(inBar 和 outBar)应该跟踪水平位移或多或少地以与球相同的速率增长。为了确保 setInterval 工作并正确收集位置,添加了一行来列出 oBall..animVal 和 oball..baseVal。在 FF 21.0 中,animVal 沿位移没有变化。我是否正确理解了您的建议?这里遵循代码(包括标题等,因为我特别是 SVG 中的菜鸟):

如果代码运行,似乎移动#ball 的 animVal 保持在相同的 x 坐标 (50) 上,而显然它正在移动。

0 投票
2 回答
2093 浏览

animation - 将 animateMotion 与 keyTimes/keyPoints 一起使用

<animateMotion>我正在尝试通过使用keyTimes="…"andkeyPoints="…"属性在 SVG 上使用非线性动画速率。它似乎不起作用:动画运动尽可能线性。

这是测试文件试试吧!

工作时,球应在第一秒内沿路径移动 90%,并在剩余 9 秒内移动最后 10%。我需要改变什么才能让它工作?

我在网上找到了另一个可以正常工作的示例,因此我知道这不是我的操作系统/浏览器/版本有问题。

(FWIW:Win7x64,Chrome30)

0 投票
1 回答
2815 浏览

javascript - 哪个 SVG/SMIL DOM 元素有 `beginElement` 方法?

最终,这是针对将在 Firefox 中运行的 Kiosk 样式应用程序(使用 jQuery 1.6.4),因此答案可以是特定于 Firefox 的。

我正在尝试制作动画 SVG,但我正在尝试通过动态插入 SMIL 来对其进行动画处理。我没有看到任何迹象表明它无法完成,并且http://satreth.blogspot.ch/2013_01_01_archive.htmlhttp://srufaculty.sru.edu/david.dailey/svg/SMILorJavaScript.svg似乎都表明它可以做到。

据我了解,问题是我需要调用该beginElement方法来启动动态插入的动画,但我在任何地方都看不到它。

这是一个演示问题的小提琴:http: //jsfiddle.net/2pvSX/

未能回答标题中的问题:

  1. 我究竟做错了什么?
  2. 是否有任何资源可以更好地理解我正在尝试做的事情?

这是一个问题:

  1. 我如何定义 SVG?
  2. 我如何创建 SMIL?
  3. 我如何访问 SVG?
  4. 我如何插入 SMIL?
  5. 完全不同的东西?

最后,有没有更好的方法来为 SVG 设置动画?

0 投票
1 回答
2685 浏览

video - JWplayer 不会改变源

背景

我有一个 JWplayer 设置,它使用 SMIL 文件列出 RTMP 流的多个源。SMIL 文件中不包含 HTML5 播放源列表(不支持 RTMP)。

问题

在 Flash 模式下播放时,视频会启动并自动选择一个来源并且可以正常工作。但是,当您手动更改源时,加载图标会永久显示,并且播放永远不会开始。我通过运行播放器并将每个源设置为唯一选项来确保每个源都可以正常工作,这很好。

在 HTML5 播放期间不会发生此问题。

链接 http://www.streaming.co.uk/sam/homepagevids/coventry.htm

源代码

Javascript 设置

SMIL 设置

发生了什么以及如何解决这个问题?