Остановить проигрывание видео при клике на кнопку

@n0kk · Регистрация: 31.12.2014

Author24 — интернет-сервис помощи студентам

Доброе время суток, есть такая проблема, не могу понять как можно реализовать, есть слайдер, в нем расположено видео, как сделать что бы при клике на переход от одного видео к другому предыдущее останавливалось?
Вот сам слайдер:

HTML5

<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
            <div>
                <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
</video>
<script>
    $(document).ready(function() {
        $('video').mediaelementplayer({
            alwaysShowControls: false,
            videoVolume: 'horizontal',
            features: ['playpause','progress','volume','fullscreen']
        });
    });
    </script>
                <img  src="../img/photography/thumb-002.jpg" />
            </div>
            <div>
               <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
                <img  src="../img/photography/thumb-003.jpg" />
            </div>
            <div>
                <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
                <img  src="../img/photography/thumb-004.jpg" />
            </div>
            <div>
                <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
                <img  src="../img/photography/thumb-005.jpg" />
            </div>
            <div>
                <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
                <img  src="../img/photography/thumb-006.jpg" />
            </div>
            <div>
                <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
                <img  src="../img/photography/thumb-007.jpg" />
            </div>
            <div>
                <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
                <img  src="../img/photography/thumb-008.jpg" />
            </div>
            <div>
                <video width="390" height="146" poster="media/cars.png">
<source src="media/cars.mp4" type="video/mp4">
                <img src="../img/photography/thumb-009.jpg" />
            </div>
            
        </div>

img это привьюшки видео, допустим юзер кликнул на следующую привьюшку слайдер сменился и предыдущее видео сбросилось-остановилось

__PION__ · 09.09.2015, 07:33

Сообщение от n0kk

юзер кликнул на следующую привьюшку слайдер сменился и предыдущее видео сбросилось-остановилось

при клике вначале вызывай метод стоп (или как он у него называется) у плеера mediaelementplayer

@n0kk · 03.10.2015, 20:27 **[ТС]**

Написал вот так:

Javascript

1
2
3

$('.thumbls').click(function () {
      $('.mediaelementplayer').stop();
    });

но так не работает...
Как можно еще сделать?

__PION__ · 04.10.2015, 02:54

Сообщение от n0kk

$('.mediaelementplayer').stop();

да не, не то, ты обращаешься к классу mediaelementplayer (которого как я вижу в коде вообще нет), а нужно к самому проигрывателю обращаться.
Я как понял используется mediaelement.js, тогда в option'ы добавь строку

Javascript

1 2	// Когда включается текущий плеер, остальные останавливаются pauseOtherPlayers: true,

подробнее mediaelementjs.com

@n0kk · 04.10.2015, 09:57 **[ТС]**

__PION__, там у меня есть этот класс, просто здесь не указал, вообщем нужно сделать когда срабатывает событие click() на нужной кнопке, выставлять option? А сам проигрыватель это разве не тег video?

__PION__ 960 / 801 / 85 Регистрация: 21.07.2010 Сообщений: 3,522
	09.09.2015, 07:33	2
	Сообщение от n0kk юзер кликнул на следующую привьюшку слайдер сменился и предыдущее видео сбросилось-остановилось при клике вначале вызывай метод стоп (или как он у него называется) у плеера mediaelementplayer 1

@n0kk 0 / 0 / 2 Регистрация: 31.12.2014 Сообщений: 226
	04.10.2015, 09:57 [ТС]	5
	__PION__, там у меня есть этот класс, просто здесь не указал, вообщем нужно сделать когда срабатывает событие click() на нужной кнопке, выставлять option? А сам проигрыватель это разве не тег video? 0

Опции темы