Установите для видео HTML5 значение PAUSE, когда видеоплеер не отображается - PullRequest
Новая
       4

Установите для видео HTML5 значение PAUSE, когда видеоплеер не отображается

3 голосов
/ 21 февраля 2012

Я бы хотел сделать это с помощью JavaScript. Я создаю презентацию, используя Reveal.js Хаким Эль Хаттаба в качестве основы.

То, как работает Reveal.js, заключается в том, что текущий просматриваемый слайд имеет класс .present, все предыдущие слайды имеют класс .past, а все слайды, которые еще не появились, имеют класс .future.

Я бы хотел, чтобы он автоматически приостанавливал любое видео, находящееся внутри слайда с настройками .past или .future.

Как мне поступить об этом?

Заранее спасибо!

************ UPDATE **************

так что благодаря некоторому направлению я перешел на форумы css-tricks я смог заставить его работать над одним видео с помощью getElementById.

ниже - JavaScript, который я использую для добавления классов .past и .future и одновременной приостановки видео. 

if( i < index ) {
    // Any element previous to index is given the 'past' class
    slide.setAttribute('class', 'past');
    document.getElementById('vid').pause();
}
else if( i > index ) {
    // Any element subsequent to index is given the 'future' class
    slide.setAttribute('class', 'future');
    document.getElementById('vid').pause();
}

Вопрос, который у меня сейчас возникает, заключается в том, как применить его к имени тега (например, видео) или, возможно, к классу.

Ответы [ 3 ]

1 голос
/ 23 февраля 2012

Теперь, когда вы разместили свой код, его легче исправить: 

if( i < index ) {
    // Any element previous to index is given the 'past' class
    slide.setAttribute('class', 'past');
    var vids = document.getElementsByClassName("past");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
}
else if( i > index ) {
    // Any element subsequent to index is given the 'future' class
    slide.setAttribute('class', 'future');
    var vids = document.getElementsByClassName("future");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
}

Посмотрите, поможет ли это.Если это не так, используете ли вы современный и соответствующий стандартам браузер?getElementsByClassName() - это относительно новая функция.Он работает в последней версии Chrome для меня.

0 голосов
/ 22 февраля 2012

@ petschekr: угадайте, это не сработает, потому что прошлое класса не ограничивается только видеоэлементами?!

Я понятия не имею, как работает и какой плеер вы используете!но мой способ будет выглядеть так:

есть только один файл с настоящим классом, справа (текущий слайд)

a) определить sth как функцию onChange (например, для каждой кнопки, котораяизменяет страницы + нажатия клавиш)

b) запускает эту функцию перед переключением страниц 

function onChange(){
       var currentSlice = document.getElementByClassName('present')  //get current html elemen
       var videoObjects = currentSlice.getElementsByTag('video')  //get videoelements here html5 video
       for each videoObj      
            videoObj.pause()

edit: псевдокод, чтобы вы поняли!

0 голосов
/ 22 февраля 2012

Я не знаю, сработает ли здесь setTimeout, но вы можете попробовать следующее: 

function PauseVids() {
    var vids = document.getElementsByClassName("past");
    var vids2 = document.getElementsByClassName("future");
    for (var i = 0; i < vids.length; i++) {
        vids[i].pause();
    }
    for (var i = 0; i < vids2.length; i++) {
        vids2[i].pause();
    }
}

// Within onLoad or $(document).ready()
setTimeout("PauseVids()", 1000);

Скажите, если это работает.

...