Question

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

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

3）视频处于闪存状态，我不确定蓝色菜单是否属于它。

4）目前iPhone和iPad无法访问该视频，因为它是闪存。

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>

视频结束后显示菜单

1 个答案: