ios - 视频结束后显示菜单

Question

1) 访问以下链接: http://pericles.webcity.com.au/~mer19867/enrolment/

2) 介绍视频将自动播放。结束后，会出现一个蓝色菜单。

3) 视频在 flash 中，我不确定蓝色菜单是否是其中的一部分。

4) 目前无法在 iPhone 和 iPad 上访问该视频，因为它是 flash。

5) 我的客户希望我将其转换为 html5。

6) 我下载了 SWF(蓝色菜单不是其中的一部分)。我将 SWF 转换为 MP4 并使用视频标签嵌入到 html5 中。

7) 如何让蓝色菜单在视频结束后出现，就像现在一样。

注意:我没有开发这个网站，所以我知道的不多。请尽可能做出最好的假设并指导我。提前致谢。

Answer 1

您可以为视频附加一个监听器，这样您就可以知道它何时播放完毕，然后您可以在视频顶部显示一个带有菜单的 div。

我已经设置了一个带有演示视频的 jsfiddle 来展示它是如何工作的 - see the demo here . (注意:视频运行大约 10-15 秒，然后菜单会自动出现。

更新:现在包括使系统响应 OP 评论的代码。

这是javascript:

var video = document.getElementById("myvideo");   
var menu = document.getElementById("endframe");

function init() {   
    video.onended = function(e) {
        menu.style.height = video.clientHeight + "px";
        menu.style.display = "block";
    } 
}
init();

window.onresize = function() {
    menu.style.height = video.clientHeight + "px";
}

这是 HTML:

<div id="container">
    <video controls autoplay id="myvideo">
      <source type="video/mp4" src="YOUR_VIDEO.mp4"/>
     </video>
    <div id="endframe">
        <h1>Menu</h1>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
</div>