推广将视频添加到视频

我正在编写一个HTML5控制器，并遇到关闭问题（我认为）。我不确定如何在所有视频标签上使用泛型循环，而不是为了“简单”而使用getElementByID时的示例。推广将视频添加到视频

具体如何概括所有这些，以便每个视频的控件仅适用于他们。

PS这是关于学习，所以图书馆来解决这个问题是不是真的是我后。

'use strict'; 
var videos = document.getElementsByTagName('video'), i, vid, controlsBox, play, mute, posterpic; 

function playPause(video) { 
    if (!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)) { 
     video.pause(); 
     play.innerHTML = "Play"; 
    } else { 
     video.play(); 
     play.innerHTML = "Pause"; 
    } 
} 

function myAppend(appendTo, toAppend) { 
    if (appendTo.nextSibling) { 
     appendTo.parentNode.insertBefore(toAppend, appendTo.nextSibling); 
    } else { 
     appendTo.parentNode.appendChild(toAppend); 
    } 
} 

for (i = 0; i < videos.length; i += 1) { 
    vid = videos[i]; 
    vid.controls = false; 

    vid.addEventListener('click', function() { 
     playPause(this); 
    }, false); 

    // Controls box to display while video is playing 
    controlsBox = document.createElement('div'); 
    controlsBox.setAttribute("class", 'videoControls'); 

    play = document.createElement('button'); 
    play.type = "Button"; 
    play.setAttribute("class", 'playButton'); 
    play.innerHTML = "Play"; 

    play.addEventListener('click', function() { 
     playPause(vid); 
    }(), false); 

    controlsBox.appendChild(play); 

    mute = document.createElement('button'); 
    mute.type = "Button"; 
    mute.setAttribute("class", 'muteButton'); 
    mute.innerHTML = "Mute"; 

    mute.addEventListener('click', function() { 
     vid.volume = 0; 
    }(), false); 

    controlsBox.appendChild(mute); 

    myAppend(vid, controlsBox); 
    //Finished with controls box 
}

来源

2012-10-21 Hyposaurus

可以把每个视频元素的控制引用。
在循环中调用myAppend之前添加以下语句。

vid.controlsBox = controlsBox; 
vid.muteControl = mute; 
vid.playControl = play;

然后playPause功能应该是这样的：

function playPause(video) { 
    if (!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)) { 
     video.pause(); 
     video.playControl.innerHTML = "Play"; 
    } else { 
     video.play(); 
     video.playControl.innerHTML = "Pause"; 
    } 
}

使用controlBox，muteControl，并且playControl上面一样为需要访问相关的控制你的其他视频功能。

如果您需要访问关联的对象，还可以将视频元素和控件的引用放入controlsBox元素中。只需在您的循环中添加以下语句。

controlsBox.video = vid; 
controlsBox.muteControl = mute; 
controlsBox.playControl = play;

来源

2012-10-21 18:41:58 Jay

推广将视频添加到视频

回答

相关问题