запуск видео Webm по кнопке

anutti · December 3, 2015

Добрый день! Подскажите как сделать запуск видео по отдельной кнопке ? Как и в этом примере (он для запуска и остановки звука) http://jsfiddle.net/248yc2jx/, мне нужно то же самое но для видео.

Спасибо.

Николя223 · December 4, 2015

vid.run();

vid.pause();

anutti · December 4, 2015

vid.run();
vid.pause();

не совсем поняла где это применить...

  <!DOCTYPE html> <html> <body> <button onclick="RunVideo()" id="playpause" type="button">Play</button><br><video muted id="myVideo" width="320" height="176" controls>  <source src="http://www.w3schools.com/tags/mov_bbb.mp4"type="video/mp4">  <source src="http://www.w3schools.com/tags/mov_bbb.ogg"type="video/ogg">  Your browser does not support HTML5 video.</video><script>var controls = {        video: $("#myVideo"),        playpause: $("#playpause")                     };function RunVideo() {                  var video = controls.video[0];                   controls.playpause.click(function(){        if (video.paused) {            video.play();            $(this).text("Pause");            } else {            video.pause();            $(this).text("Play");        }                        $(this).toggleClass("paused");     });};</script> </body> </html>

не работает (((

Edited December 4, 2015 by anutti

Q4Dizzy · December 4, 2015

Может так?

Источник

anutti · December 4, 2015

Да спасибо большое! Все получилось )

anutti · December 4, 2015

Может так?

Источник

Спасибо за помощь, еще один вопрос, у меня на страничке 3 видео, а эта кнопка срабатывает только на первом, хотя я ID по разному называю

Не знаю как сделать красивее код (пример для 2-х)... когда одно работает прекрасно а когда 3 только у последнего

<video muted id="myVideo1" width="320" height="176" controls>  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">  <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.</video><br><button id="play1">Play</button><video muted id="myVideo2" width="320" height="176" controls>  <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">  <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.</video><br><button id="play2">Play</button>_______<script>var video = document.getElementById('myVideo1');var playbutton = document.getElementById("play1");playbutton.addEventListener("click", function (e) {  //  Toggle between play and pause based on the paused property  if (video.paused) {    video.play();  } else {    video.pause();  }}, false);video.addEventListener("play", function () {  playbutton.innerHTML = "Pause";}, false);video.addEventListener("pause", function () {  playbutton.innerHTML = "Play";}, false);</script><script>var video = document.getElementById('myVideo2');var playbutton = document.getElementById("play2");playbutton.addEventListener("click", function (e) {  //  Toggle between play and pause based on the paused property  if (video.paused) {    video.play();  } else {    video.pause();  }}, false);video.addEventListener("play", function () {  playbutton.innerHTML = "Pause";}, false);video.addEventListener("pause", function () {  playbutton.innerHTML = "Play";}, false);</script>

Edited December 4, 2015 by anutti

Q4Dizzy · December 4, 2015

http://jsfiddle.net/Q4Dizzy/1xz3o0zo/2/

Вообще для красоты нужно допиливать или перепиливать.. Я не очень силён в чистом яваскрипте..

anutti · December 5, 2015

Что-то не получилось... видимо у меня руки кривые ( Я сделала как вверху, только пару моментов поправила, вроди работает но по коду конечно ужасно у меня выглядит .

Все равно, Вам спасибо большое за помощь )

Sign In

запуск видео Webm по кнопке

Recommended Posts

anutti

Link to comment

Share on other sites

Николя223

Link to comment

Share on other sites

anutti

Link to comment

Share on other sites

Q4Dizzy

Link to comment

Share on other sites

anutti

Link to comment

Share on other sites

anutti

Link to comment

Share on other sites

Q4Dizzy

Link to comment

Share on other sites

anutti

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information