使用 mediaelement 每 n 秒播放一次视频
Play a video after every n seconds using mediaelement
我在 jsfiddle 上有一个中间元素示例,我用它来播放视频并每 52 秒重复一次。
这是fiddle
http://jsfiddle.net/codebreaker87/30t50mgc/17/
和html
<video id="youtube1" width="640" height="360" autoplay="true"></video>
和jquery
$(document).ready(function(){
setInterval(function() {
var player = new MediaElementPlayer('#youtube1', {
type: ['video/webm'],
success: function (mediaElement, domObject) {
var sources = [
{ src: "http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm", type: 'video/webm' },
];
mediaElement.setSrc(sources);
mediaElement.load();
mediaElement.play();
}
});
}, 52000);
});
视频在 52 秒后不再播放,这也是视频的长度。
你把事情搞得比实际情况要复杂得多。当 video
元素的播放结束时,会引发 ended
事件。您可以挂钩该事件,然后通过调用 play()
再次开始播放视频。这样做的好处是代码更简单,而且在用户跳过视频时也有效 ahead/back。使用您当前的方法,计时器很容易与视频状态不同步。试试这个:
var player = new MediaElementPlayer('#youtube1', {
type: ['video/webm'],
success: function(mediaElement, domObject) {
var sources = [{
src: "http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm",
type: 'video/webm'
}];
mediaElement.setSrc(sources);
mediaElement.load();
mediaElement.play();
mediaElement.addEventListener('ended', function() {
this.play();
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/css/mediaelementplayer.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/js/mediaelement-and-player.min.js"></script>
<video id="youtube1" width="640" height="360" autoplay="true"></video>
您可以使用此代码每 2 秒播放一次视频。
vplayer = new MediaElementPlayer('video');
// check if paused
setInterval(function(){
var classList = $('.mejs-playpause-button').attr("class").split(' ');
for (var i = 0; i < classList.length; i++) {
if (classList[i] === 'mejs-play') {
vplayer.play();
}
}
},2000);
// without check paused
setInterval(function(){
vplayer.play();
},2000);
我在 jsfiddle 上有一个中间元素示例,我用它来播放视频并每 52 秒重复一次。
这是fiddle
http://jsfiddle.net/codebreaker87/30t50mgc/17/
和html
<video id="youtube1" width="640" height="360" autoplay="true"></video>
和jquery
$(document).ready(function(){
setInterval(function() {
var player = new MediaElementPlayer('#youtube1', {
type: ['video/webm'],
success: function (mediaElement, domObject) {
var sources = [
{ src: "http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm", type: 'video/webm' },
];
mediaElement.setSrc(sources);
mediaElement.load();
mediaElement.play();
}
});
}, 52000);
});
视频在 52 秒后不再播放,这也是视频的长度。
你把事情搞得比实际情况要复杂得多。当 video
元素的播放结束时,会引发 ended
事件。您可以挂钩该事件,然后通过调用 play()
再次开始播放视频。这样做的好处是代码更简单,而且在用户跳过视频时也有效 ahead/back。使用您当前的方法,计时器很容易与视频状态不同步。试试这个:
var player = new MediaElementPlayer('#youtube1', {
type: ['video/webm'],
success: function(mediaElement, domObject) {
var sources = [{
src: "http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm",
type: 'video/webm'
}];
mediaElement.setSrc(sources);
mediaElement.load();
mediaElement.play();
mediaElement.addEventListener('ended', function() {
this.play();
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/css/mediaelementplayer.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.13.2/js/mediaelement-and-player.min.js"></script>
<video id="youtube1" width="640" height="360" autoplay="true"></video>
您可以使用此代码每 2 秒播放一次视频。
vplayer = new MediaElementPlayer('video');
// check if paused
setInterval(function(){
var classList = $('.mejs-playpause-button').attr("class").split(' ');
for (var i = 0; i < classList.length; i++) {
if (classList[i] === 'mejs-play') {
vplayer.play();
}
}
},2000);
// without check paused
setInterval(function(){
vplayer.play();
},2000);