JavaScript - 结束播放视频

时间:2013-02-21 16:10:21

标签: javascript jquery

我需要能够创建一个if语句,基本上说:

if (var video == end)
{
playVideo('videoname');
}

我认为它可能实际上必须处于循环中,所以一旦视频结束它将移动到下一个,但是使用这个if语句它只会执行一次。

我只有c ++经验(价值4个月),JavaScript有点不同。我正在为网站使用全屏背景播放器,这里是代码:

HTML Initialisation JS

<script>
    $(document).ready(function() {
        $('dl').toggle();
        $('h2').bind('click', function(event) {
            event.preventDefault();
            $(this).next('dl').slideToggle(500, function() {
                $('.video-background').videobackground('resize');
            });
        });
        $('body').prepend('<div class="video-background"></div>');
        $('.video-background').videobackground({
            videoSource: [['video/video-1.mp4'],
                ['video/video-1.webm'], 
                ['video/video-1.flv'], 
                ['video/video-1.wmv'], 
                ['video/video-1.mov'], 
                ['video/video-1.ogv']], 
                controlPosition: '.video-control-test',
            poster: '',
            loadedCallback: function() {
                $(this).videobackground('');
            }
        });
    });
</script>

JavaScript文件

/*!
 * jQuery Video Background plugin
 * https://github.com/georgepaterson/jquery-videobackground
 *
 * Copyright 2012, George Paterson
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 */
(function ($, document, window) {
    /*
     * Resize function.
     * Triggered if the boolean setting 'resize' is true.
     * It will resize the video background based on a resize event initiated on the browser window.
     *
     */
    "use strict";
    function resize(that) {
        var documentHeight = $(document).height(),
            windowHeight = $(window).height();
        if (that.settings.resizeTo === 'window') {
            $(that).css('height', windowHeight);
        } else {
            if (windowHeight >= documentHeight) {
                $(that).css('height', windowHeight);
            } else {
                $(that).css('height', documentHeight);
            }
        }
    }
    /*
     * Preload function.
     * Allows for HTML and JavaScript designated in settings to be used while the video is preloading.
     *
     */
    function preload(that) {
        $(that.controlbox).append(that.settings.preloadHtml);
        if (that.settings.preloadCallback) {
            (that.settings.preloadCallback).call(that);
        }
    }
    /*
     * Play function.
     * Can either be called through the default control interface or directly through the public method.
     * Will set the video to play or pause depending on existing state.
     * Requires the video to be loaded. 
     *
     */
    function play(that) {
        var video = that.find('video').get(0),
            controller;
        if (that.settings.controlPosition) {
            controller = $(that.settings.controlPosition).find('.ui-video-background-play a');
        } else {
            controller = that.find('.ui-video-background-play a');
        }
        if (video.paused) {
            video.play();
            controller.toggleClass('ui-icon-pause ui-icon-play').text(that.settings.controlText[1]);
        } else {
            if (video.ended) {
                video.play();
                controller.toggleClass('ui-icon-pause ui-icon-play').text(that.settings.controlText[1]);
            } else {
                video.pause();
                controller.toggleClass('ui-icon-pause ui-icon-play').text(that.settings.controlText[0]);
            }
        }
    }
    /*
     * Mute function.
     * Can either be called through the default control interface or directly through the public method.
     * Will set the video to mute or unmute depending on existing state.
     * Requires the video to be loaded.
     *
     */
    function mute(that) {
        var video = that.find('video').get(0),
            controller;
        if (that.settings.controlPosition) {
            controller = $(that.settings.controlPosition).find('.ui-video-background-mute a');
        } else {
            controller = that.find('.ui-video-background-mute a');
        }
        if (video.volume === 0) {
            video.volume = 1;
            controller.toggleClass('ui-icon-volume-on ui-icon-volume-off').text(that.settings.controlText[2]);
        } else {
            video.volume = 0;
            controller.toggleClass('ui-icon-volume-on ui-icon-volume-off').text(that.settings.controlText[3]);
        }
    }
    /*
     * Loaded events function.
     * When the video is loaded we have some default HTML and JavaScript to trigger.    
     *
     */
    function loadedEvents(that) {
        /*
         * Trigger the resize method based if the browser is resized.
         *
         */
        if (that.settings.resize) {
            $(window).on('resize', function () {
                resize(that);
            });
        }
        /*
         * Default play/pause control   
         *
         */
        that.controls.find('.ui-video-background-play a').on('click', function (event) {
            event.preventDefault();
            play(that);
        });
        /*
         * Default mute/unmute control  
         *
         */
        that.controls.find('.ui-video-background-mute a').on('click', function (event) {
            event.preventDefault();
            mute(that);
        });
        /*
         * Firefox doesn't currently use the loop attribute.
         * Loop bound to the video ended event.
         *
         */
        if (that.settings.loop) {
            that.find('video').on('ended', function () {
                $(this).get(0).play();
                $(this).toggleClass('paused').text(that.settings.controlText[1]);
            });
        }
    }
    /*
     * Loaded function.
     * Allows for HTML and JavaScript designated in settings to be used when the video is loaded.
     *
     */
    function loaded(that) {
        $(that.controlbox).html(that.controls);
        loadedEvents(that);
        if (that.settings.loadedCallback) {
            (that.settings.loadedCallback).call(that);
        }
    }
    /*
     * Public methods accessible through a string declaration equal to the method name.
     *
     */
    var methods = {
        /*
         * Default initiating public method.
         * It will created the video background, default video controls and initiate associated events. 
         *
         */
        init: function (options) {
            return this.each(function () {
                var that = $(this),
                    compiledSource = '',
                    attributes = '',
                    data = that.data('video-options'),
                    image,
                    isArray;
                if (document.createElement('video').canPlayType) {
                    that.settings = $.extend(true, {}, $.fn.videobackground.defaults, data, options);
                    if (!that.settings.initialised) {
                        that.settings.initialised = true;
                        /*
                         * If the resize option is set.
                         * Set the height of the container to be the height of the document
                         * The video can expand in to the space using min-height: 100%;
                         *
                         */
                        if (that.settings.resize) {
                            resize(that);
                        }
                        /*
                         * Compile the different HTML5 video attributes.    
                         *
                         */
                        $.each(that.settings.videoSource, function () {
                            isArray = Object.prototype.toString.call(this) === '[object Array]';
                            if (isArray && this[1] !== undefined) {
                                compiledSource = compiledSource + '<source src="' + this[0] + '" type="' + this[1] + '">';
                            } else {
                                if (isArray) {
                                    compiledSource = compiledSource + '<source src="' + this[0] + '">';
                                } else {
                                    compiledSource = compiledSource + '<source src="' + this + '">';
                                }
                            }
                        });
                        attributes = attributes + 'preload="' + that.settings.preload + '"';
                        if (that.settings.poster) {
                            attributes = attributes + ' poster="' + that.settings.poster + '"';
                        }
                        if (that.settings.autoplay) {
                            attributes = attributes + ' autoplay="autoplay"';
                        }
                        if (that.settings.loop) {
                            attributes = attributes + ' loop="loop"';
                        }
                        $(that).html('<video ' + attributes + '>' + compiledSource + '</video>');
                        /*
                         * Append the control box either to the supplied that or the video background that. 
                         *
                         */
                        that.controlbox = $('<div class="ui-video-background ui-widget ui-widget-content ui-corner-all"></div>');
                        if (that.settings.controlPosition) {
                            $(that.settings.controlPosition).append(that.controlbox);
                        } else {
                            $(that).append(that.controlbox);
                        }
                        /*
                         *  HTML string for the video controls.' + that.settings.controlText[2] + '
                         *' + that.settings.controlText[1] + '
                         */
                        that.controls = $('<ul class="ui-video-background-controls"><li class="ui-video-background-play">'
                            + '<a class="ui-icon ui-icon-pause" href="#"></a>'
                            + '</li><li class="ui-video-background-mute">'
                            + '<a class="ui-icon ui-icon-volume-on" href="#"></a>'
                            + '</li></ul>');
                        /*
                         * Test for HTML or JavaScript function that should be triggered while the video is attempting to load.
                         * The canplaythrough event signals when when the video can play through to the end without disruption.
                         * We use this to determine when the video is ready to play.
                         * When this happens preloaded HTML and JavaSCript should be replaced with loaded HTML and JavaSCript.
                         *
                         */
                        if (that.settings.preloadHtml || that.settings.preloadCallback) {
                            preload(that);
                            that.find('video').on('canplaythrough', function () {
                                /*
                                 * Chrome doesn't currently using the autoplay attribute.
                                 * Autoplay initiated through JavaScript.
                                 *
                                 */
                                if (that.settings.autoplay) {
                                    that.find('video').get(0).play();
                                }
                                loaded(that);
                            });
                        } else {
                            that.find('video').on('canplaythrough', function () {
                                /*
                                 * Chrome doesn't currently using the autoplay attribute.
                                 * Autoplay initiated through JavaScript.
                                 *
                                 */
                                if (that.settings.autoplay) {
                                    that.find('video').get(0).play();
                                }
                                loaded(that);
                            });
                        }
                        that.data('video-options', that.settings);
                    }
                } else {
                    that.settings = $.extend(true, {}, $.fn.videobackground.defaults, data, options);
                    if (!that.settings.initialised) {
                        that.settings.initialised = true;
                        if (that.settings.poster) {
                            image = $('<img class="ui-video-background-poster" src="' + that.settings.poster + '">');
                            that.append(image);
                        }
                        that.data('video-options', that.settings);
                    }
                }
            });
        },
        /*
         * Play public method.
         * When attached to a video background it will trigger the associated video to play or pause.
         * The event it triggeres is dependant on the existing state of the video.
         * This method can be triggered from an event on a external that.
         * If the that has a unique controlPosition this will have to be declared.
         * Requires the video to be loaded first.
         *
         */
        play: function (options) {
            return this.each(function () {
                var that = $(this),
                    data = that.data('video-options');
                that.settings = $.extend(true, {}, data, options);
                if (that.settings.initialised) {
                    play(that);
                    that.data('video-options', that.settings);
                }
            });
        },
        /*
         * Mute public method.
         * When attached to a video background it will trigger the associated video to mute or unmute.
         * The event it triggeres is dependant on the existing state of the video.
         * This method can be triggered from an event on a external that.
         * If the that has a unique controlPosition this will have to be declared.
         * Requires the video to be loaded first.
         *
         */
        mute: function (options) {
            return this.each(function () {
                var that = $(this),
                    data = that.data('video-options');
                that.settings = $.extend(true, {}, data, options);
                if (that.settings.initialised) {
                    mute(that);
                    that.data('video-options', that.settings);
                }
            });
        },
        /*
         * Resize public method.
         * When invoked will resize the video background to the height of the document or window.
         * The video background height affects the height of the document.
         * Affecting the video background's ability to negatively resize.  
         *
         */
        resize: function (options) {
            return this.each(function () {
                var that = $(this),
                    data = that.data('video-options');
                that.settings = $.extend(true, {}, data, options);
                if (that.settings.initialised) {
                    resize(that);
                    that.data('video-options', that.settings);
                }
            });
        },
        /*
         * Destroy public method.
         * Will unbind event listeners and remove HTML created by the plugin.
         * If the that has a unique controlPosition this will have to be declared.
         *
         */
        destroy: function (options) {
            return this.each(function () {
                var that = $(this),
                    data = that.data('video-options');
                that.settings = $.extend(true, {}, data, options);
                if (that.settings.initialised) {
                    that.settings.initialised = false;
                    if (document.createElement('video').canPlayType) {
                        that.find('video').off('ended');
                        if (that.settings.controlPosition) {
                            $(that.settings.controlPosition).find('.ui-video-background-mute a').off('click');
                            $(that.settings.controlPosition).find('.ui-video-background-play a').off('click');
                        } else {
                            that.find('.ui-video-background-mute a').off('click');
                            that.find('.ui-video-background-play a').off('click');
                        }
                        $(window).off('resize');
                        that.find('video').off('canplaythrough');
                        if (that.settings.controlPosition) {
                            $(that.settings.controlPosition).find('.ui-video-background').remove();
                        } else {
                            that.find('.ui-video-background').remove();
                        }
                        $('video', that).remove();
                    } else {
                        if (that.settings.poster) {
                            that.find('.ui-video-background-poster').remove();
                        }
                    }
                    that.removeData('video-options');
                }
            });
        }
    };
    /*
     * The video background namespace.
     * The gate way for the plugin. 
     *
     */
    $.fn.videobackground = function (method) {
        /*
         * Allow for method calling.
         * If not a method initialise the plugin.
         *
         */
        if (!this.length) {
            return this;
        }
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        }
        $.error('Method ' +  method + ' does not exist on jQuery.videobackground');
    };
    /*
     * Default options, can be extend by options passed to the function.
     *
     */
    $.fn.videobackground.defaults = {
        videoSource: [],
        poster: null,
        autoplay: true,
        preload: 'none',
        loop: false,a
        controlPosition: null,
        resize: true,
        preloadHtml: '',
        preloadCallback: null,
        loadedCallback: null,
    };
}(jQuery, document, window));

我正在尝试一些事情:

function nextvid(that)
{
    if (var video==ended)
        {

        }

}

我无法弄清楚要使用哪些函数和变量!

1 个答案:

答案 0 :(得分:1)

每个视频绑定到ended事件。

之类的东西
$('#videoElm').bind("ended",function(e){
     playNext();
})

更新

更新了代码以反映评论http://jsfiddle.net/joshK/EcqJ3/7/

var videoSources = [//array of sources to use in the loop
   ["http://www.w3schools.com/html/mov_bbb.mp4","http://www.w3schools.com/html/mov_bbb.oog"],
   ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/movie.wmv"]
];

var videoPtr = 0;//keeps count which video we are upto

$(function () {
   $('body').prepend('<div class="video-background"></div>');
   videoLooper();
});
function videoLooper(){
   if(videoPtr >= videoSources.length){//if we got to the last video
      videoPtr = 0;//reset to first video
   }

   $(".video-background").videobackground({
      videoSource: videoSources[videoPtr++],
      controlPosition: '.video-control-test',
      poster: '',
      loadedCallback: function () {
         var that = $(this);
         $(this).find("video").on("ended",function(){
            that.videobackground('destroy');
            videoLooper();
          });
          $(this).videobackground('');
      }
  });
}