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

I am looking for solution/fixed my issue. I want to removed the video player at the video end & load my iframed vimeo video.

Same as this Demo: http://www.moretvtime.com/vastplayer/update.html

My current work: http://www.moretvtime.com/vastplayer/video.html

My codes as below ;

<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>


<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 already handles this with this id. if you look in the console when you execute your code you will see the error twice.

Code above should work.

</div>