- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
刚刚开始查看 popcorn.js,但遇到了一些问题。
我有一首 30 秒的轨道,
但是我希望文件从 2 秒开始播放,并在结束前 3 秒停止播放。
有谁知道这是否可能,因为我在文档中找不到它?
或者有一个命令可以跳转到时间轴中的某个点,所以几乎就像
pop.playAt('2 second');
类似的东西?
谢谢
最佳答案
这里有两个简单的步骤:1) 将视频提前两秒2) 确保它在 27 秒处停止 (30 - 3)
要推进视频,您可以使用 currentTime 方法,但如果您尝试在加载视频元数据之前设置 currentTime,则会遇到错误。 (当您第一次设置视频时,浏览器在获取标题之前不知道持续时间是多少,并且您无法将 currentTime 设置为晚于持续时间。)
var popcorn = Popcorn('#video');
if (popcorn.duration()) {
popcorn.currentTime(2);
} else {
popcorn.on('loadedmetadata', function() {
popcorn.currentTime(2);
}
}
现在,为了确保视频在 27 秒处停止,您可以使用“cue”方法,该方法需要几秒的时间并在那时触发回调函数。
popcorn.cue(27, function() {
popcorn.pause();
});
现在,默认情况下,Popcorn 在从视频接收到“timeupdate”事件时会触发事件,通常每 1/4 秒(250 毫秒)一次。因此您可能会看到视频运行了几帧。 (例如,它可能会在 27.1 秒处停止)。如果您需要更高的准确性,请使用frameAnimation选项,这使得爆米花尝试更新至60fps(每16毫秒)。
var popcorn = Popcorn('#video', {
frameAnimation: true
});
您还可以通过在 URL 中附加 anchor 形式的提示,告诉浏览器仅向 Web 服务器询问您需要的视频部分,从而节省加载时间。
http://example.com/videos/myvideo.webm#t=2,27
这取决于浏览器和网络服务器的支持,但也没什么坏处。
编辑:实际上,这里不要使用frameAnimation。问题是它使用 requestAnimationFrame,并且您不能保证如果您的浏览器选项卡不可见,它会被调用。这对于动画来说是有意义的,但在这里不是。我可能会在 popcorn.js 中提出解决方案。
关于jquery - popcorn.js 开始和停止时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13180848/
如何将 popcorn.js 配置为每次视频时间更新时发出事件?我应该只使用视频元素的 timeupdate 事件吗? 目前,我只能在特定开始时间设置事件: var p = Popcorn( "#vi
我正在使用Popcorn.js及其扩展Popcorn Capture . 我有以下代码: function setVidPoster() { var video = Popcorn( '#bz
刚刚开始查看 popcorn.js,但遇到了一些问题。 我有一首 30 秒的轨道, 但是我希望文件从 2 秒开始播放,并在结束前 3 秒停止播放。 有谁知道这是否可能,因为我在文档中找不到它? 或者有
我正在制作交互式视频,并且刚刚开始使用 popcorn.js我有一个视频,在视频中的某个点上有 2 个按钮可以转到另一个视频。我的问题是,我创建的在第一个视频中的某个时间弹出的所有文本也会在其他视频中
我使用爆米花 JS 向视频添加了几个提示。 如何删除或修改特定提示? 最佳答案 将提示添加到 Popcorn 实例后,您可以使用 removeTrackEvent 方法像删除任何插件事件一样删除它。
我正在寻找一种使用 Popcorn.js 使视频字幕淡入淡出的方法。 就目前而言,似乎只是在使字幕内联或不显示字幕之间进行艰难的切换。 start: function( event
所以,这是瘦的: 在 YouTube 视频和单独的音频循环上运行 popcorn.js。每个都是一个轨道,例如“video”和“audio1”等。 我通过套接字进行用户交互,该套接字将命令作为“Pla
我认为这是一个非常基本/愚蠢的问题,但我无法理解我做错了什么...我想使用 popcorn.js 向 html5 视频添加字幕和时间线。 这是 html5 代码: (...) (...)
我想使用 Popcorn.js,它看起来非常适合管理视频。我现在正在使用脚注方法,一切正常。 example.footnote({ start: 2, end:
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
例如,我正在开发一个程序来获取商店中订购的商品总数。我为可用项目创建了一个名为 menu 的字典,但如果订单列表中订购的项目不在键中。与我的字典“菜单”相同,该项目应替换为可乐。 我的目的是将商品转换
假设我们在网页上嵌入了 YouTube 视频。 在视频播放器下方,我们可以使用类似 Popcorn.js 的媒体框架显示与视频同步的字幕吗? ? 最佳答案 有趣的是你提到了 Popcorn.js,因为
所以当它在标签之间内联时它可以完美地工作,但是我怎样才能把它放在一个外部 js 文件中并让它运行呢?我一字不差地复制了它,但它不起作用。有什么问题? 编辑:您可以在此处查看我正在处理的教程:http:
我需要使用 Popcorn.js 更改视频中的提示点。有没有办法编辑已通过 Cue() 方法发送给爆米花播放器的 Cue 事件的时间? 谢谢! 最佳答案 var events = Popcorn.ge
我正在尝试在视频中设置多个提示点。我不想写出每个提示,而是想遍历一个包含我需要的数据的对象,例如提示时间和有关如何处理回调的一些信息。 问题是,当我尝试遍历对象时,它会覆盖除最后一个提示之外的所有提示
我从 Popcorn Javascript 网站获取了 popcorn.js。它运行良好,并且对开始、结束和文本进行了硬编码。现在我添加了另一个函数来获取字幕 XML(start、dur 和 text
我有一个带有表情符号的字符串 I love 🍿 我需要用它的 html 实体转义那个爆米花表情符号,所以我得到了 I love 🍿 我正在用 Java 编写我的代码,我一直在尝试不同
所以这就是挑战。制作一个可点击的爆米花链接覆盖视频。在桌面上很简单,但事实证明 iOS 是一个挑战。如果视频元素具有 controls 属性,iOS 会劫持视频窗口内的所有点击,使链接覆盖不可点击。然
使用Popcorn JS 1.5.6和推荐的HTMLYouTubeVideoElement(推荐使用不推荐使用的Popcorn.youtube)显示嵌入式YouTube视频时,遇到了一个小问题。使用例
我正在使用 popcornjs 加载与来自 youtube 的视频的交互。当我使用文档中的代码时: // ensure the web page (DOM) has loaded
我是一名优秀的程序员,十分优秀!