[求助]视频播放完隐藏按钮显示的问题

各位大神，我写了一个页面，就是强制用户看完视频，开始用户点击，自动播放视频，当视频播放完毕以后，我的下一页按钮显示（之前这个按钮的属性是display:none）
这个该怎么实现

11 个解决方案

#1

视频播放完调用播放接口播放不需要点击按钮
显示按钮document.getElementById('next').style.display='block'

#2

引用 1 楼 slwsss 的回复:

视频播放完调用播放接口播放不需要点击按钮
显示按钮document.getElementById('next').style.display='block'

现在如何判断视频已经播放完

#3

引用 2 楼 roy2651 的回复:

Quote: 引用 1 楼 slwsss 的回复:

视频播放完调用播放接口播放不需要点击按钮
显示按钮document.getElementById('next').style.display='block'

现在如何判断视频已经播放完

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

#4

引用 3 楼 slwsss 的回复:

Quote: 引用 2 楼 roy2651 的回复:

Quote: 引用 1 楼 slwsss 的回复:

视频播放完调用播放接口播放不需要点击按钮
显示按钮document.getElementById('next').style.display='block'

现在如何判断视频已经播放完

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

我刚也去看了，发现了里面有个ended的属性，他那个例子不是有一个button来判断他是否已经结束嘛？
现在我开始的页面没有任何button，怎么来触发判断这个ended

#5

http://msdn.microsoft.com/zh-cn/library/ff974154(v=vs.85).aspx
http://blog.csdn.net/zengconggen/article/details/8071949

#6

加个定时器没100MS检测下视频的ended属性，如果true则取消定时器并执行你的代码。

#7

引用 5 楼 slwsss 的回复:

http://msdn.microsoft.com/zh-cn/library/ff974154(v=vs.85).aspx
http://blog.csdn.net/zengconggen/article/details/8071949

引用 6 楼 zyb134506 的回复:

加个定时器没100MS检测下视频的ended属性，如果true则取消定时器并执行你的代码。

<p align="center">
               <video id="video1" width="800" height="600" autoplay="autoplay" >
               <source src="TestVideo.mp4"  type="video/ogg"  ></video></p>

<script type="text/javascript">
myVid=document.getElementById("video1");
function hasVidEnded()
  { 
    if (myVid.ended == false)
    { document.getElementById("button1").style.display="none"}
else{document.getElementById("button1").style.display="block"}
   
  
  }

 
</script> 

   <div align="center">
   <input id="button1" input type="button" name="Submit" style="display:none;background:SlateGray;color:WhiteSmoke;width:85px;height:40px;" value="下一页" onclick="window.location.href='t2.html'">
   </div>


这是我部分代码，真的被这个搞头疼了，刚开始接触都是边做边学

#8

我就是开始页面让video自动播放，当播放完毕后那个下一页按钮才出来，用户才能点击跳转

#9

引用 7 楼 roy2651 的回复:

Quote: 引用 5 楼 slwsss 的回复:

http://msdn.microsoft.com/zh-cn/library/ff974154(v=vs.85).aspx
http://blog.csdn.net/zengconggen/article/details/8071949

引用 6 楼 zyb134506 的回复:

加个定时器没100MS检测下视频的ended属性，如果true则取消定时器并执行你的代码。

<p align="center">
               <video id="video1" width="800" height="600" autoplay="autoplay" >
               <source src="TestVideo.mp4"  type="video/ogg"  ></video></p>

<script type="text/javascript">
myVid=document.getElementById("video1");
function hasVidEnded()
  { 
    if (myVid.ended == false)
    { document.getElementById("button1").style.display="none"}
else{document.getElementById("button1").style.display="block"}
   
  
  }

 
</script> 

   <div align="center">
   <input id="button1" input type="button" name="Submit" style="display:none;background:SlateGray;color:WhiteSmoke;width:85px;height:40px;" value="下一页" onclick="window.location.href='t2.html'">
   </div>


这是我部分代码，真的被这个搞头疼了，刚开始接触都是边做边学

document.getElementById('video1').onended=function(){alert(2)}

#10

引用 9 楼 slwsss 的回复:

Quote: 引用 7 楼 roy2651 的回复:

Quote: 引用 5 楼 slwsss 的回复:

http://msdn.microsoft.com/zh-cn/library/ff974154(v=vs.85).aspx
http://blog.csdn.net/zengconggen/article/details/8071949

引用 6 楼 zyb134506 的回复:

加个定时器没100MS检测下视频的ended属性，如果true则取消定时器并执行你的代码。

<p align="center">
               <video id="video1" width="800" height="600" autoplay="autoplay" >
               <source src="TestVideo.mp4"  type="video/ogg"  ></video></p>

<script type="text/javascript">
myVid=document.getElementById("video1");
function hasVidEnded()
  { 
    if (myVid.ended == false)
    { document.getElementById("button1").style.display="none"}
else{document.getElementById("button1").style.display="block"}
   
  
  }

 
</script> 

   <div align="center">
   <input id="button1" input type="button" name="Submit" style="display:none;background:SlateGray;color:WhiteSmoke;width:85px;height:40px;" value="下一页" onclick="window.location.href='t2.html'">
   </div>


这是我部分代码，真的被这个搞头疼了，刚开始接触都是边做边学

document.getElementById('video1').onended=function(){alert(2)}

<video id="video1" width="800" height="600" autoplay="autoplay" >
               <source src="TestVideo.mp4"  type="video/ogg"  ></video></p>

<script type="text/javascript">
document.getElementById("video1").addEventListener("onended",function () {
    document.getElementById("button1").style.display="block"},true)
</script> 

   <div align="center">
   <input id="button1" input type="button" name="Submit" style="display:none;background:SlateGray;color:WhiteSmoke;width:85px;height:40px;" value="下一页" onclick="window.location.href='t2.html'">
   </div>


这样嘛

#11

谢谢你们我已经解决了这个问题