Как привязать кнопке видео?

179

21 июля 2017, 05:03

Ребят помогите, есть две кнопки , нужно для каждой кнопке добавить видео файл. Допустим при нажатии на кнопку открывается одно видео , а при нажатии на другую кнопку на том же месте открывается другое видео

<div id="content">
        <video class="videoContent" id="video1_play" src="resources/1.mov"  autoplay></video> //./ первое видео
        <button>
        <img src="resources/image/btn.png"/>
        </button>
        <video class="videoContent" id="video2_play" src="resources/2.mov"  autoplay></video> //./ второе видео
        <button>
            <img src="resources/image/btn.png"/>
        </button>
    </div>

Answer 1

var els__butLink = document.querySelectorAll('.but-link'), 
    el__player = document.querySelector('#video'); 
 
els__butLink.forEach(function(el__butLink) { 
  el__butLink.addEventListener('click', function() { 
    var str__video = el__butLink.getAttribute('data-video'); 
     
    el__player.src = str__video; 
    el__player.play(); 
  }); 
});

<div id="content"> 
  <video class="videoContent" id="video" autoplay controls=""></video> 
   
  <button class="but-link" data-video="resources/1.mov"><img src="resources/image/btn.png"/></button> 
  <button class="but-link" data-video="resources/2.mov"><img src="resources/image/btn.png"/></button> 
</div>

Answer 2

Одно видео и 2 кнопки. При нажатии он заменяет источник.

function fVideo(){ 
document.getElementById("video1_play").setAttribute("src", "resources/1.mov"); 
return false; 
}; 
 
function sVideo(){ 
document.getElementById("video1_play").setAttribute("src", "resources/2.mov"); 
return false; 
};

<div id="content"> 
        <video class="videoContent" id="video1_play" src="resources/1.mov"  autoplay></video> //./ первое видео 
        <button onclick="fVideo()"> 
            <img src="resources/image/btn.png"/> 
        </button> 
        <button onclick="sVideo()">        
            <img src="resources/image/btn.png"/> 
        </button> 
    </div>