CODEWITHSUNDEEP
javascripthtmlhtml5-videocdata
Christine
Christine

Reputation: 11

Redirect after a video has ended

I'm creating eLearning content in an application called MadCap Flare.
I'm trying to get the intro bumper video to play and then after the video is done it moves on to another page (we will say url for this forum). Here is my code, and I cannot get this to work at all. The video plays but it will not move on to the url. When I view source code I see it put in a CDAT error.

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page: 
url('..\Resources\TemplatePages\Home-Page.flmsp');">
    <head>
    </head>
    <body>
        <p>
            <video MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
            </video>
        <script type="text/javascript">
        var video1 = document.getElementsByTagName('video1')[0];
                
        video1.onended = function(e) {
        window.location.replace('http://www.hpe.com');
        }
        </script>
        </p>
    </body>
</html>

Upvotes: 1

Views: 66

Answers (1)

Himanshu Maurya
Himanshu Maurya

Reputation: 123

You forgot to add the id attribute to the video tag. Try this :

<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page: 
url('..\Resources\TemplatePages\Home-Page.flmsp');">
    <head>
    </head>
    <body>
        <p>
            <video id="video1" MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
            </video>
            <script type="text/javascript">
                var video1 = document.getElementById('video1');
                
                video1.onended = function(e) {
                    window.location.replace('http://www.hpe.com');
                }
            </script>
        </p>
    </body>
</html>

Upvotes: 2

Related Questions