我需要能够创建一个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)
{
}
}
我无法弄清楚要使用哪些函数和变量！
答案 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('');
}
});
}