How Do I make the event Click a button instead of inputting a URL... because the URL is never the same but the words Next Episode will always be there..
// Do not name the function "play()"
function playVideo(){
var video = document.getElementById('video');
video.play();
video.addEventListener('ended',function(){
window.location = 'http://www.google.com';
});
}
</script>
<video controls id="video" width="770" height="882" onclick="playVideo()">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Give your link an id:
<a id="some-id" href="LINK" title="episode name"><span>next episode</span> <i class="icon-chevron-right"></i></a>
Then change your event listener to this:
video.addEventListener('ended',function(){
document.getElementById('some-id').click();
});
Related
I have an audio file called sound.wav that is 14 seconds long. When a user clicks a button, sound.wav source url is changed and sound.wav is reloaded and is now 7 seconds long.
However, my browser does not display the changes. Only after clicking the refresh button does it display the changes.
Here is my code:
<div id="audioContainer">
<audio id ="myAudio" controls>
<source id = "wav_src" src="http://localhost:3000/sounds/sound.wav" type="audio/wav">
</audio>
</div>
//user clicks button... sound.wav's url source is changed
document.getElementById("myAudio").load(); //code to reload the sound.wav
As you can see, I'm reloading the html audio element for sound.wav after the user presses a button. However, the sound file remains unchanged on the website, unless I hit refresh.
How do I fix this?
When you change the src of the <source> element, it doesn't change the src of the its parent MediaElement (<audio> or <video>). You have to call this MediaElement's .load() method :
set_src.onclick = function() {
source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
console.log('source src:', source.src);
setTimeout(function(){console.log('audio src:', audio.currentSrc)});
}
load_btn.onclick = function() {
audio.load(); // you must call this
setTimeout(function(){console.log('audio src:', audio.currentSrc)});
};
<audio id="audio" controls="controls">
<source id="source">
</audio>
<br>
<button id="set_src">set src</button>
<button id="load_btn">load</button>
Of course you would normally do this in one-go:
set_src.onclick = function() {
source.src = 'http://cdn.music2ten.com/mp3/pd4u/GershwinWhiteman-RhapsodyInBluePart1.mp3';
audio.load(); // you must call this
}
<audio id="audio" controls="controls">
<source id="source">
</audio>
<br>
<button id="set_src">set src</button>
How can I replace a video embedded in an iframe using JavaScript or jQuery?
My HTML is:
<iframe src="https://openload.co/embed/7Cq9AdeLtL0/" allowfullscreen="true"
id="bigframe" frameborder="0"></iframe>
<a data-link="https://openload.co/embed/5xTolN_ejRI/">openload</a>
And the other video source should be in the <a> tag so when I click the word "openload", it will change the video source to the second source and another think I need to do this in multiple posts with a variable video
You don't need any JavaScript.
Give the iframe a name ex. <iframe src='about:blank' name='vid'....
Next, give each link a target attribute withe the value of the iframe's name. ex. <a href='path/to/video.mp4' target='vid'...
Demo
Doesn't work here, go to this Plunker for a working demo
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4' target='vid'>1</a>
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005610.mp4' target='vid'>2</a>
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' target='vid'>3</a>
<iframe src='about:blank' name='vid' width='320' height='180'></iframe>
It is batter to play video using html video tag instead iframe .You can do it with jquery like below
html
<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 1</a>
<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 2</a>
<video width="320" height="240" controls>
<source src="https://openload.co/embed/5xTolN_ejRI" type="video/mp4">
Your browser does not support the video tag.
</video>
JS
$(document).ready(function(){
// set video srs
$('a').click(function(){
$("video").html('<source src="'+$(this).data('link')+'"></source>' );
});
});
const iFrame = document.querySelectorAll("iframe");
// console.log(iFrame)
iFrame.forEach((item, index) => {
let src = item.src;
const newItem = document.createElement("video");
newItem.style = "width:640px; height:360px";
newItem.src = src;
item.parentNode.replaceChild(newItem, iFrame[index]);
newItem.setAttribute("class", "iframe-video-tag-" + index);
newItem.setAttribute("controls", "true");
let videoTag = document.getElementsByClassName("iframe-video-tag-" + index);
videoTag.src = src;
});
Im trying to create a function with video play while mouseover the highlighted words and pause when mouse leave. But currently i only know how to auto play while mouseover the video not the highlighted words.
Wish any could help me on this.
Thanks
<a href="https://www.google.com" target="_blank"><video width="250px" height="250px" controls preload onmouseover="this.play()" onmouseout="this.pause()" >
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" >
Not Supporting
</video></a>
<br/><br/>
<a href="#" >Play&Pause</a>
One way you can achieve this without jQuery (as you don't appear to be using it in your snippet) is to assign an id to the video then add onmouseover and onmouseout events to the a tag which targets the element with that id.
Add id="video" to the video tag
Add onmouseover="document.getElementById('video').play()" and onmouseout="document.getElementById('video').pause()" to the a tag containing the "Play&Pause" text
<a href="https://www.google.com" target="_blank">
<video width="250px" height="250px" controls preload onmouseover="this.play()" onmouseout="this.pause()" id="video">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
Not Supporting
</video>
</a>
<br/>
<br/>
Play&Pause
To tidy up your code you can centralise this functionality and remove the inline JavaScript.
Add class="trigger" to elements that will trigger the play and pause events
In JavaScript loop through the elements with the trigger class and attach the mouseover and mouseout events
var triggers = document.getElementsByClassName('trigger');
var video = document.getElementById("video");
for (var i = 0; i < triggers.length; i++) {
triggers[i].addEventListener("mouseover", function(event) {
video.play()
}, false);
triggers[i].addEventListener("mouseout", function(event) {
video.pause()
}, false);
}
<a href="https://www.google.com" target="_blank">
<video class="trigger" width="250px" height="250px" controls preload id="video">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
Not Supporting
</video>
</a>
<br/>
<br/>
<a class="trigger" href="#">Play&Pause</a>
By using jQuery alone, and targeting the elements rather than using inline scripting:
var $myVideo = $( "#myVideo" ),
$myBtn = $( "#play_btn" );
$myBtn.hover(function() {
$myVideo[0].play();
}, function() {
$myVideo[0].pause();
});
Example: jsfiddle
Hope it helps.
Very simple. Add a <span id="text"></span> around your highlighted Text
$( '#text' ).hover(
function() {
$( 'video' ).play();
}, function() {
$( 'video' ).pause();
}
);
Here it is ! https://jsfiddle.net/Alteyss/vsvzh3m2/
Using simple jQuery, simulating the mouse.
$("#btn").mouseover(function() {
$("video").mouseover();
});
$("#btn").mouseout(function() {
$("video").mouseout();
});
Hope I helped.
I have a video in popup. When use below code on popup close, the video doesn't stop buffering and have the old video reference when reopen it. Here is the code:
HTML:
<div id="w_oPopup">
<div id="w_oPlayer">
<video id="w_oVideoFrame" autoplay loop controls tabindex="0" width="946" height="532" poster="">
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
</div>
JS:
$('.w_cExitPopupButton').bind('click', onPopupBlockerClick);
function onPopupBlockerClick(e) {
$('#w_oPopupBlocker').hide();
//Here my tries...
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = "";
}
Try using the pause() method to stop the audio and set the audio path again and play. There is no stop() method to stop the video.
function stop_audio(){
$('#w_oVideoFrame')[0].pause();
$('#w_oVideoFrame')[0].src = " ";
}
function play_audio(){
$('#w_oVideoFrame')[0].src = "path of audio";
$('#w_oVideoFrame')[0].play();
}
use the currentTime on the selected video element
video.currentTime = 0;
Is it possible somehow in jQuery to hide specific video or source element?
<video id="one" autoplay width="300px" height="300px">
<source src="media/sample3.mp4" type="video/mp4" />
</video>
<video id="two" autoplay width="300px" height="300px">
<source src="media/sample.mp4" />
</video>
I would like to play sample3, for example, for 1 minute, then pause sample3, hide it, show sample.mp4 and play that video.
Any suggestons?
My code which I tryed:
var video = $('video').get(0).pause();
if ($('video').get(0).paused) {
$('video').get(0).hide();
};
but the $('video').get(0).hide(); throws Uncaught TypeError: Object #<HTMLVideoElement> has no method 'hide'
I would try something like this
$(document).ready(function(){
var one = $('#one');
var two = $('#two');
play_sound(one);
setTimeout(function(){
pause_sound(one);
one.hide();
two.show();
play_sound(two);
setTimeout(function(){
pause_sound(two);
}, 180*1000);
}, 60*1000);
});
function play_sound(var file){
file.play();
}
function pause_sound(var file){
file.pause();
}