视频停止后如何重定向到主页

Posted 2023-05-07

【中文标题】视频停止后如何重定向到主页

【英文标题】：How can I redirect to home page after video stops

【发布时间】：2015-11-07 00:12:26

【问题描述】：

我正在使用 Cincopa 将我的视频嵌入到我的网站中。它嵌入的页面被隐藏并且导航被删除。所以我希望每个人都在视频完成后被重定向到主页。

这是我的代码：

<div id="cp_widget_55a42f1b-6e51-4738-87f9-eaf52dc6a826">...</div>
<script type="text/javascript">
    var cpo = [];
    cpo["_object"] = "cp_widget_55a42f1b-6e51-4738-87f9-eaf52dc6a826";
    cpo["_fid"] = "AsBAj2M3MQOr";
    var _cpmp = _cpmp || [];
    _cpmp.push(cpo);
    (function() 
        var cp = document.createElement("script");
        cp.type = "text/javascript";
        cp.async = true;
        cp.src = "//www.cincopa.com/media-platform/runtime/libasync.js";
        var c = document.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(cp, c);
    )();
</script>
<noscript>Powered by Cincopa <a href='http://www.cincopa.com/video-hosting'>Video Hosting for Business</a> solution.<span>Test</span><span>bitrate</span><span> 39961 kb/s</span><span>height</span><span> 1080</span><span>duration</span><span> 00:02:35.31</span><span>lat</span>:<span> +33.2269</span><span>long</span>:<span> 21-96.93</span><span>fps</span><span> 59.94</span><span>width</span><span> 1920</span><span>originaldate</span><span> 2015-06-06 19:08:58</span>
</noscript>

【问题讨论】：

嘿@Christopher Moore 你有什么运气吗？

"这个问题没有得到足够的重视。" 因为它已经有很多可能的重复：How can I redirect to a URL after a html video has ended? 和 Redirect html5 video after play

任何Plunker ?只需将整个代码粘贴到那里

【参考方案1】：

Cincopa 嵌入了视频 HTML 标签，您必须按照说明添加事件 here

嗯，现在我还没有心情做一个完整的测试，所以我只是建议一个你需要适应的解决方法。

为了给你准确的代码，我需要知道：

您使用的是什么 CMS？ 您可以使用 cincopa 为您的视频标签添加 id 或类吗？ 你包括jQuery吗？

然后您必须在脚本底部添加以下行：

//Wait until the page is entirely loaded, and so you can access the rendered video tag (you'll need jQuery)
$( document ).ready(function() 
    
    function goHomeYouAreDrunk(e) 
        window.location.href = "http://url.to.your.home.page";
    
    //I'm supposing that your video is the sole video tag in your page, if it's not, you'll have to get it by its id or class
    document.find('video').addEventListener('ended',goHomeYouArDrunk,false);
);

【讨论】：

好的，谢谢。我想也许我不太明白如何准确地做到这一点，甚至不明白这需要放在代码中的什么地方。你能不能帮帮我。

我不在家，但我一回来会尝试编辑答案

非常感谢您的帮助。谢谢！

好的，这不在我的前十名答案中，但至少这应该为您指明正确的方向。我明天清醒的时候再完成……

路易斯，感谢您的帮助。我正在使用 WIX，我可以在 Cincopa 中编辑 CSS。我没有使用我知道的 jquery。 CSS 代码太长了，粘贴在这里。

【参考方案2】：

通常，这将通过 <audio> 或 <video> 元素上的事件侦听器。

如何添加事件监听器 | W3Schools : https://www.w3schools.com/Jsref/met_element_addeventlistener.asp

但是为了确定，我会用 Javascript 做的一种方法是：

// The interval clocks every .1 second(s).
setInterval(function() 
    // If the element's current playback time is the playback duration (has reached the end).
    if (audioElement.currentTime == audioElement.duration)
        doSomething()
, 100)

虽然如果您对性能持谨慎态度并且不想使用setInterval() 函数，那么请坚持向元素添加事件。

顺便说一句，要重定向到另一个页面，请使用 Javascript 函数location.assign("https://www.example.com.")。

【参考方案3】：

此代码已在https://www.cincopa.com/中测试过：

document.getElementById("video_iframe_id_in_your_page")
    .contentWindow
    .document.getElementsByTagName("video")[0]
    .addEventListener("ended", function(args)
        window.open("/", "_top");
    );

希望能帮到你。

【参考方案4】：

可以通过设置window.location="/"重定向到首页

我不确定你是如何检查视频是否结束的，你可以像这样添加一个监听器。

完成后，您可以调用处理函数将用户重定向到主页。

document.getElementById('myVideo').addEventListener('ended',redirectToHomePage,false);

redirectToHomePage()
   window.location = "/";