Question

我正在创建特定弹出窗口的视频元素onload事件，有什么方法可以在视频结束时为创建的视频调用 onended 事件。

我创建视频元素onload的代码如下

动态代码

require ("connect.php");

    $query = "SELECT * FROM videos";
    $result = mysql_query($query);
    $numrows = mysql_num_rows($result);
    if ($numrows > 0) {

        $video_div = 0;
        $hide = 0;



        while ($row = mysql_fetch_array($result)) {

            $video_id = $row['id'];

            $url = $row['url'];

            $url_value = "video.php?name=" . $url;
            $filename = $row['name'];
            $user_type = $row['usertype'];
            $url = array($url);
            if ($user_type == 0) {
                $user_category = "Prospective User";
            }
            if ($user_type == 1) {
                $user_category = "Admin User";
            }
            if ($user_type == 2) {
                $user_category = "Actual Customer";
            }


            $video_div = $video_div + 1;
            $video_dive = "video_div" . $video_div;


            //click event to load colorbox
            echo '<a  class="inline" href="#'. $video_dive.'"  id="'.$url_value.'">
            <img src="images/thumbnail.jpg" width="50" height="50"   > 
            </a>';
            //div to show vide element through jquery
            echo '<div id="' . $video_dive . '"    > </div>';

       }
} else {
        echo "There are no uploaded videos";
    }

javascript代码

$(document).ready(function() {

$(".inline", this).colorbox({

            inline : true,

            width : '650px',
            //load function that opens the popup
            onLoad : function() {

                href_value = $(this).attr("href");
                id_value = $(this).attr("id");

                techi = {
                    "techOrder" : ["flash", "html5"]
                };

                //to reder video element insid the div
                $(href_value).html('<video id="player" data-my_videoid="1"   class="videocall video-js vjs-default-skin vjs-big-play-centered"  preload="auto" poster="images/video_img.png" width="640" height="360" controls data-setup="' + techi + '"><source src="' + id_value + '" type="video/mp4"  /> <p class="vjs-no-js">To view the video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p> </video>');

                var myPlayer = videojs('player');
                myPlayer.load();
                $(href_value).show();

            }
});
}):

我正在动态弹出窗口的加载事件上创建视频元素

以上称为弹出的onLoad事件，视频结束后必须触发onended事件

是否有办法在视频结束时触发一个事件

我想设置已结束的事件，但我不知道如何触发事件，因为我在使用jquery打开colorbox弹出窗口时创建视频元素

由于

Answer 1

我希望这能解决你的问题：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video> 

<script type="text/javascript">

    $(document).ready(function () {
        $("video").on("ended", function() {
            $.ajax({
              // set your params here
          });
        });
    });

</script>
</body>
</html>

使用$("video").on("ended", ...)添加回调。

更新：抱歉，删除了一些不必要的代码。刷新页面。更新2：更多关于$ .ajax，jQuery API Documentation

如何为加载弹出窗口时创建的视频调用onended事件

1 个答案: