时间戳

首页 > 解决方案 > 想在视频结束时删除视频播放器并加载我的功能

javascript - 想在视频结束时删除视频播放器并加载我的功能

问题描述

我正在寻找解决方案/解决我的问题。我想在视频结束时删除视频播放器并加载我的 iframed vimeo 视频。

与此演示相同： http ://www.moretvtime.com/vastplayer/update.html

我目前的工作： http ://www.moretvtime.com/vastplayer/video.html

我的代码如下；

<html>
<body>
<link href="//vjs.zencdn.net/5.10/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs.ads.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs.ima.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/style.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs-skin-colors.css" />

<video id="content_video" class="video-js vjs-skin-colors-green"
        poster = ""   controls preload="auto" width="640"
        height="380">
<source src="http://www.moretvtime.com/vastplayer/process.mp4" type="video/mp4">

</video>
<div id="videoEnd" style="display:none"><iframe src="https://player.vimeo.com/video/143727101?autoplay=0&quality=360p&muted=1" width="640" height="380" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

<script src="//vjs.zencdn.net/5.10/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="http://www.moretvtime.com/vastplayer/videojs.ads.js"></script>
<script src="http://www.moretvtime.com/vastplayer/videojs.ima.js"></script>
<script src="http://www.moretvtime.com/vastplayer/mice.js"></script>


<script>
        var player = videojs('content_video', options).ready(function() {
          var mplayer =  document.getElementById('content_video').addEventListener('ended',myHandler,false);
        function myHandler(e) {
            if(!e) { e = window.event; }
            // What you want to do after the event
            document.getElementById('content_video').style.display="none";
            document.getElementById('videoEnd').style.display="block";
        }
</script>

</body>
</html>

标签： javascriptphphtml

解决方案

<html>
<head>
<link href="//vjs.zencdn.net/5.10/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs.ads.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs.ima.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/style.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs-skin-colors.css" />

<script src="//vjs.zencdn.net/5.10/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="http://www.moretvtime.com/vastplayer/videojs.ads.js"></script>
<script src="http://www.moretvtime.com/vastplayer/videojs.ima.js"></script>
<script src="http://www.moretvtime.com/vastplayer/mice.js"></script>
</head>
<body>
<!--  relocated to <head>
<link href="//vjs.zencdn.net/5.10/video-js.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs.ads.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs.ima.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/style.css" />
<link rel="stylesheet" href="http://www.moretvtime.com/vastplayer/videojs-skin-colors.css" />
-->

<video id="content_video" class="video-js vjs-skin-colors-green"
        poster = ""   controls preload="auto" width="640"
        height="380">
<source src="http://www.moretvtime.com/vastplayer/process.mp4" type="video/mp4">

</video>
<div id="videoEnd" style="display:none"><iframe src="https://player.vimeo.com/video/143727101?autoplay=0&quality=360p&muted=1" width="640" height="380" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>

<!--  relocated to <head>
<script src="//vjs.zencdn.net/5.10/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="http://www.moretvtime.com/vastplayer/videojs.ads.js"></script>
<script src="http://www.moretvtime.com/vastplayer/videojs.ima.js"></script>
<script src="http://www.moretvtime.com/vastplayer/mice.js"></script>
-->

<script>
        //var player = videojs('content_video', options).ready(function() { removed
        var mplayer =  document.getElementById('content_video').addEventListener('ended',myHandler,false);
        function myHandler(e) {
            if(!e) { e = window.event; }
            // What you want to do after the event
            document.getElementById('content_video').style.display="none";
            document.getElementById('videoEnd').style.display="block";
        }
</script>

</body>
</html>

videojs('content_video', options).ready(function()

videojs 已经用这个 id 处理了这个。如果您在执行代码时查看控制台，您将看到两次错误。

上面的代码应该可以工作。

推荐阅读