问题
I'm using jQuery and Flowplayer to turn links to FLV files into embedded videos like this:
$(document).ready(function() {
if($('a[type^="video"]').length > 0) {
$('a[type^="video"]').each(function() {
var video_path = $(this).attr('href');
var video_box = $(this).parent();
video_box.html('');
video_box.css('width', '680px');
video_box.css('height', '460px');
video_box.flowplayer('/sites/default/files/flowplayer-3.2.7.swf', video_path);
});
}
});
This is working fine except that all the videos start playing simultaneously. I've tried adding autoPlay: false
several different ways, but so far none have worked. From the documentation it seems like I should be able to do it this way:
video_box.flowplayer('/sites/default/files/flowplayer-3.2.7.swf', video_path, {clip: {autoPlay: false}});
But that doesn't work.
回答1:
@Kevin
You don't need an extra div surrounding the flowplayer-a-tag. All you need to do is set display:block on the a-tag.
So your code can be condensed to this:
$('a[type^="video"]').each(function(i) {
$(this).css({'width': '680px','height': '460px','display': 'block'}).attr('id', 'player-' + i);
var player = $f('player-' +i, '../flowplayer.commercial-3.2.7.swf', {
clip: {
autoPlay: false
}
});
});
回答2:
Have you tried the syntax, that is used in the documentation? In your each loop you can do:
$f(this.parentNode, {src: "flowplayer.swf"}, {
clip: {
url: video_path
autoPlay: false,
onStart: function(clip){alert("Clip "+ clip.url);} // attach event listener
},
});
A side note: The line if($('a[type^="video"]').length > 0) {
is not necessary, because jQuery will only loop through the elements, if there are any, otherwise it just skips the block.
回答3:
I got it to work like this:
$(document).ready(function() {
$('a[type^="video"]').each(function(index) {
var video_path = $(this).attr('href');
var video_box = $(this).parent();
video_box.html('');
video_box.css('width', '680px');
video_box.css('height', '460px');
video_box.attr('id', 'player-' + index);
$f(video_box.attr('id'), '/sites/default/files/flowplayer-3.2.7.swf', {
clip: {
autoPlay: false,
url: video_path
}
});
});
});
The key to getting the $f()
function to work was to give it an id. The divs I was using didn't have ids so I gave them one with the line video_box.attr('id', 'player-' + index);
.
I still don't know why I couldn't get the jQuery object.flowplayer() method to accept the autoPlay: false
property. But I suppose using the $f()
function is just as good. Thanks for the help.
回答4:
You can pass flowplayer an object of options, one of which is autoplay, here is the documentation for this: http://flowplayer.org/documentation/configuration/
This is an example from the above page:
flowplayer("player", {
src: "flowplayer.swf"
}, {
clip: {
autoPlay: false,
autoBuffering: true
}
});
Flowplayer has tons of options you can set on initialization including event bindings for things like onPause
and onPlay
.
来源:https://stackoverflow.com/questions/8143906/set-autoplay-false-on-flowplayer-in-jquery