无法使popcorn.js工作
无法使popcorn.js工作
提问于 2016-11-08 21:40:56
我认为这是一个非常基本/愚蠢的问题，但我不能理解我做错了什么……我想添加字幕和时间线到一个使用popcorn.js的html5视频。
下面是html5代码：
<script src="http://popcornjs.org/code/dist/popcorn-complete.js">
</script>
(...)
<nav id="timeline"> </nav>
(...)
<video id="video" controls>
<source src="media/ita.webm" type="video/webm">
<source src="media/ita.mp4" type="video/mp4">
</video>
(...)下面是爆米花部分：
document.addEventListener( "DOMContentLoaded", function() {
var popcorn = Popcorn('#video', { pauseOnLinkClicked: true });
popcorn.timeline({
start: 1,
target: "timeline",
title: "This is a title",
text: "this is some interesting text that goes inside",
innerHTML: "Click here for <a href='http://www.google.ca'>Google</a>" ,
direction: "down"
})
.timeline({
start: 3,
target: "#timeline",
title: "double as interesting",
text: "this is some interesting text that goes inside",
innerHTML: "Maybe a button? <button onClick=\"window.location.href='http://www.google.com'\">Click Me</button>",
direction: "down"
})
.timeline({
start: 7,
end: 10,
target: "#timeline",
title: "3x as interesting",
text: "this is some interesting text that goes inside",
innerHTML: "",
direction: "down"
});
popcorn.subtitle({
start: 1,
end: 5,
text: "Subtitle",
});
popcorn.play();
}, false);pauseOnLinkClicked: true是唯一起作用的部分...
回答 1
Stack Overflow用户
发布于 2016-11-08 22:02:20
Here's what you've posted working in action.
在你的JS里
target: "timeline"初始设置，但在设置之后
target: "#timeline"时间线数组中的下一个元素。
HTML：
<html>
<head>
<title>PopcornJS Test</title>
<script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
</head>
<body>
<nav id="timeline"></nav>
<video id="video" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/webm">
<source src="media/ita.mp4" type="video/mp4">
</video>
</body>
</html>JS：
document.addEventListener("DOMContentLoaded", function() {
var popcorn = Popcorn('#video', { pauseOnLinkClicked: true });
popcorn.timeline({
start: 1,
target: "timeline",
title: "This is a title",
text: "this is some interesting text that goes inside",
innerHTML: "Click here for <a href='http://www.google.ca'>Google</a>" ,
direction: "down"
})
.timeline({
start: 3,
target: "timeline",
title: "double as interesting",
text: "this is some interesting text that goes inside",
innerHTML: "Maybe a button? <button onClick=\"window.location.href='http://www.google.com'\">Click Me</button>",
direction: "down"
})
.timeline({
start: 7,
end: 10,
target: "timeline",
title: "3x as interesting",
text: "this is some interesting text that goes inside",
innerHTML: "",
direction: "down"
});
popcorn.subtitle({
start: 1,
end: 5,
text: "Subtitle",
});
popcorn.play();
}, false);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40488434
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号