个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
33
4
这周我正在面试一家机构，我的面试官对他全新的 mac 书非常满意。当我的小电影播放器在最新版本的 Safari 上完全失败时，这有点尴尬。帮忙？
我在搜索在线教程和该网站上的一些线程后将其拼凑在一起。不确定我从哪里得到代码。它位于 kristian.co.nz
将来我想显示接下来将要播放的视频的预览图像，任何有关如何执行此操作的建议将不胜感激。
感谢您的帮助。
<html>
<head>
<script type="text/javascript">
var videoSources = ["http://kristian.co.nz/video/Showreel2016_H264_website4.webm", "http://kristian.co.nz/video/Craftsmanintro_web.webm", "http://kristian.co.nz/video/GTA 03 shark.m4v", "http://kristian.co.nz/video/dj_intro.webm", "http://kristian.co.nz/video/Sketch.webm", "http://kristian.co.nz/video/Monkeybizz.webm"]
var currentIndex = 0;
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex+1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
</script>
</head>
<body onload="myNewSrc()">
<div id="section-title" >
<video preload="auto" onended="myAddListener()" controls width="100%" title="" src="" poster="images/introMovie_poster.gif">
</video>
</div>
</body>
</html>
最佳答案
一种方法是创建另一个数组来保存视频海报/缩略图。然后添加一个监听器，以便在视频播放时显示下一个剪辑的缩略图/海报。在下面的示例中，我仅使用一个单独的 div 标签，其中显示“下一个剪辑”，并在调用监听器函数时显示下一个剪辑的缩略图，并访问海报/缩略图数组中的下一个缩略图并将其加载到 img src 标签中。
<html>
<head>
<script type="text/javascript">
var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://kristian.co.nz/video/GTA%2003%20shark.m4v", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];
var currentIndex = 0;
var videoThumbnails = ["https://placehold.it/150x100.jpg","https://placehold.it/150x200.jpg","https://placehold.it/150x300.jpg","https://placehold.it/150x400.jpg","https://placehold.it/150x480.jpg"];
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
function myNewThumb() {
var nextThumb = document.getElementsByTagName('img')[0];
nextThumbIndex = (currentIndex+1) % videoThumbnails.length;
nextThumb.src = videoThumbnails[nextThumbIndex];
nextThumb.load();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex+1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
myVideo.addEventListener('progress',myNewThumb,false);
}
</script>
</head>
<body onload="myNewSrc(),myNewThumb()">
<div id="section-title" >
<video preload="auto" onended="myAddListener()" controls width="480" height="360" title="" src="" poster="https://placehold.it/350x150">
</video>
</div>
<div id="movie_image">
<p>Next clip playing:</p>
<img src="" alt="video image">
</div>
</body>
</html>
关于javascript - HTML 电影播放器在最新的 Safari 上无法运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42684579/
33
4
0
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
ECharts是一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，提供直观、生动、可交互、可高度个性化定制
前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文
作为一名ios开发攻城狮,在苹果没有出arc(自动内存管理机制)时,我们几乎有一半的开发时间都耗费在这么管理内存上.后来苹果很人性的出了arc,虽然在很大程度上,帮助我们开发者节省了精力和时间.但是
如何反转Pandas中DataSeries的排序顺序，以便我按降序使用它们？ 最佳答案 In [28]: s = pd.Series([20, 10, 30], ['c', 'a', 'b']) In
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Is jQuery $.browser Deprecated? 最新的 jQuery 库是否发生变化 $.brows
我正在开发一个 Intranet 项目，所以我无法复制/粘贴代码，所以希望我的描述和一些小片段会有所帮助。 我知道 MySQL 触发器无法做到这一点，但希望有一种干净的 JPA PrePersist(
这是数据集: 人员状态日期 埃里克 1 1/1/2015 埃里克 2 2/1/2015 埃里克 3 2015 年 3 月 1 日 约翰福音 1 3/1/2015 约翰福音 2 2015 年 2 月 1
现在我正在使用下面的查询按每篇文章的 auto_increment id 排序 mysql_query("SELECT * FROM articles ORDER BY id DESC"); 我想知道
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 我们不允许提出有关书籍、工具、软件库等方面的建议的问题。您可以编辑问题，以便用事实和引用来回答它。 关闭
已结束。此问题不符合 Stack Overflow guidelines .它目前不接受答案。 我们不允许提出有关书籍、工具、软件库等方面的建议的问题。您可以编辑问题，以便用事实和引用来回答它。 关闭
现在我正在使用下面的查询按每篇文章的 auto_increment id 排序 mysql_query("SELECT * FROM articles ORDER BY id DESC"); 我想知道
在我们做文章的时候常用一些函数修改来实现自己的页面效果，例如，时间的自定义格式 我们常常需要乃至的，搜集了些有关时间格式的CODE，作大家为参考,希望对大家有些帮助 列表页list_article
我想将某些东西提交到 github 存储库，但我(显然)没有任何权利这样做。我对那个 repo 做了一个分支，提交了我的更改并提交了一个 pull-request。 现在，问题是过了一段时间其他人已经
我是 SQL 新手，所以现有的答案对我来说有点复杂。 我有三张 table : WORKER |id |name |date |... JOB |id |name |salary |accept AP
我正在自动从PowerPoint和Excel电子表格中生成PowerPoint报表。在粘贴表格之前，我已经完成了整个过程。 我使用PPApp.CommandBars.ExecuteMso ("Past
我们有 1 个 Kafka 主题和 1 个分区: 从 spring boot kafka 消费者那里看到一个相当奇怪的行为。 Spring kafka消费者在重新启动时总是从主题的开头开始消费。 我已
通过编程从iOS照片库获取最新照片是否有技巧？ 我知道我可以按日期搜索，但是我必须每隔一微秒进行一次扫描，以便进行某种比较以准确地找到它。 有没有人做过这个或任何想法？ 最佳答案 我之前采取的一种方法
我们上周将 Web 应用程序中的 Telerik Kendo 库从 V2015.2.902 升级到 V2016.1.112。从那时起，我们注意到使用 Kendo 的页面需要很长时间才能加载(30 秒到
我有两个表: STUDENT GRADES ---------- ---------- id id name person_id ad
我是一名优秀的程序员,十分优秀！