Is there a way to change the video src using jQuery when a link is clicked?
For example, if the user clicks on "#staff", the video src will be updated.
<ul class="nav nav-pills" >
<li role="presentation" class="loginPills"><a id="student" href="#">Student </a></li>
<li role="presentation" class="loginPills"><a id="staff" href="#">Staff</a></li>
<li role="presentation" class="loginPills"><a id="employer"href="#">Employer</a></li>
</ul>
Current video setup:
<video playsinline autoplay muted loop poster="" id="bgvid">
<source src="Border-Collies.mp4" type="video/mp4" id="mp4">
Attempted code (not functioning as expected):
$( document ).ready(function() {
$('#staff').on({
'click': function(){
$('#mp4').attr('src','The-Coast.mp4');
$('#webm').attr('src','The-Coast.webm');
console.log("click");
}
});
});
Any help would be appreciated!