使用Froillajs编写的Froogaloop的多个Vimeo玩家

Question

我正在尝试使用Vimeo的api来控制一个页面上的多个玩家。 我想使用Froogaloop的libarary，但我不知道如何让它在没有jQuery的情况下工作。

以下是我的尝试无效vimeoPlayer.el[i].addEvent is not a function

var vimeoPlayer = {
    el: document.querySelectorAll('.video iframe'),

    init: function(){
        for (var i = 0; i < vimeoPlayer.el.length; i++) {
            vimeoPlayer.el[i].addEvent('ready', function() {
                console.log('ready');
                vimeoPlayer.el[i].addEvent('play', vimeoPlayer.onPlay);
                vimeoPlayer.el[i].addEvent('finish', vimeoPlayer.onFinish);
            });
        }

    },
    onPlay: function(){
        console.log('play');
    },
    onFinish: function(){
        console.log('finished');
    }
};
vimeoPlayer.init();

Answer 1

我已经制定了以下解决方案：

＆＃13;

＆＃13;

var vp = {
    el: document.querySelectorAll('.video-fit.--overlay iframe'),

    init: function(){
        for (var i = 0; i < vp.el.length; i++) {
            Froogaloop( vp.el[i] ).addEvent('ready', vp.onReady);
        }
    },
    onReady: function(playerID){
        var froogaloop = $f(playerID);
        froogaloop.addEvent('play', vp.onPlay);
        froogaloop.addEvent('finish', vp.onFinish);
        froogaloop.addEvent('pause', vp.onPause);
        console.log('ready', playerID);
        var videoComponet = document.querySelector('#' + playerID).parentNode.parentNode.querySelector('.component-block__fill .video-action');

        videoComponet.addEventListener('click', function(){
            froogaloop.api('play');
        },false);

    },
    onPlay: function(playerID){
        console.log('play', playerID);
        var overlay = document.querySelector('#' + playerID).parentNode.parentNode.querySelector('.component-block__fill');
        overlay.classList.add('--hidden');
    },
    onPause: function(playerID){
        console.log('stop', playerID);
        var overlay = document.querySelector('#' + playerID).parentNode.parentNode.querySelector('.component-block__fill');
        overlay.classList.remove('--hidden');
    },
    onFinish: function(playerID){
        vp.onPause(playerID);
    }
};

vp.init();

＆＃13;

<?php

function videoBlock ($video ,$count){
	$videohtml = $video['video'];
	$addString = '?api=1&player_id=player' . $count;

	$doc = new DOMDocument();
    $doc->loadHTML($videohtml);
    $tags = $doc->getElementsByTagName('iframe');
    foreach ($tags as $tag) {
        $old_src = $tag->getAttribute('src');
        $new_src_url = $old_src . $addString;
        $tag->setAttribute('src', $new_src_url);
		$tag->setAttribute('id', 'player' . $count);
    }
    $videohtml = $doc->saveHTML();
	?>

	<section class="component-block mt1">
		<div class="video-fit --overlay">
			<?= $videohtml ?>
		</div>
		<div class="component-block__fill">
			<div class="component-block__background" style="background-image:url('<?= $video[poster][sizes][large]?>');"><!-- --></div>
			<div class="component-block__details --center">
				<span class="video-action btn red">Play</span>
			</div>
		</div>
	</section>
<?php } ?>

＆＃13;

＆＃13;

＆＃13;