Replace video in embedded iframe - javascript

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;
});

Related

Java Script Auto Next Page after video ends

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();
});

Dynamically added videos using jquery not playing on mobile

I am trying to display video preview when some one touch on that screen on touchstart event by dynamically add video tag and video source (which is .webm) video and will start to play automatically. I can fetch the video tag but video is not getting played.
Here is my code:
<div class="thumb-overlay playthumb">
<img src="http://img.domain.com/thumbs/2.jpg" title="" alt="" id="2" class="img-responsive ">
<div class="duration">15:11</div>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$(".playthumb").on('touchstart', function(event) {
var thumb = $(this).children('img')[0];
var id = thumb.id;
$('#thumbPlayerM').remove();
var video = $('<video style="width:100%;height:100%;position:absolute;top:0;left:0;padding:0;margin:0;" id="thumbPlayerM" class="img-fluid" loop=""></video>');
var content = '<source type="video/webm" src="http://img.domain.com/webm/' + id + '/' + id + '.webm"></source>';
$(video).append(content);
$(video).hide();
var target = $("#" + id);
$(target).after($(video));
$(video)[0].play();
$(video).fadeIn();
});
});
</script>
I even try this also
var vid = $("#thumbPlayerM");
vid.play();
$(video).fadeIn();
Video is coming over the image but not playing. Any one can help me? Thank you.
I fixed this issue, need to add this:
<video autoplay loop muted playsinline></video>
My videos are already muted but I have no idea why it was not working. I must check my encoder.

Play video while hover to highlighted words

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.

Change YouTube iframe src with jQuery

I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.

Need to mute audio and change image with JS

I am trying to create a toggle switch for the audio that replaces the icon dependent on the state. Here is my code (that is not working):
<div id="bgAudioControls">
<a href="#" onclick="muteSound()">
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>
<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<script language="javascript">
function muteSound() {
if (document.getElementById("mute").src == "img/sound-off.svg")
{
document.getElementById("unmute").src = "img/sound-on.svg";
document.getElementById('bgAudio').muted = true;
}
else
{
document.getElementById("mute").src = "img/sound-off.svg";
document.getElementById('bgAudio').muted = false;
}
}
</script>
I am positive I am overlooking something SUPER simple.. Any help appreciated.
A live view of the whole code in action can be seen at http://arc.adamroper.com
The below code works - albeit as two buttons, not a toggle.
Mute
Unmute
UPDATE : working FIDDLE
What says #Stasik is :
You have to remove id="mute" from the <a> tag and put it in the <img> tag
Like this:
<img id="mute" src="img/sound-off.svg" />
UPDATE
to play/pause try this found here
COMPLETE CODE
HTML
<div id="bgAudioControls">
<a href="#" >
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>
<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
JAVASCRIPT
$(function() {
$("#mute").click(function(e) {
e.preventDefault();
var song = $('audio')[0]
if (song.paused){
song.play();
document.getElementById("mute").src = "img/sound-on.svg";
}else{
song.pause();
document.getElementById("mute").src = "img/sound-off.svg";
}
});
});
Accessing ".src" of the mute element is not correct, since src is the attribute of the child of the mute element. Assign id="mute" to the element directly for a quick fix.

Categories

Resources