Dynamically added videos using jquery not playing on mobile - javascript

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.

Related

add class not working with html5 video player using jquery

I have a simple video block, on video ended I am displaying certain gif,
Problem:
Now when a user pauses the video the gif also shows up, meaning When the video has ended the gifs shows up now when I play again the video and pause the video the gifs show again
To do
I want when a user pauses the video the gif should not display, meaning the gif should show up only on video ended
Here is my solution
HTML
<div canplay id="video-block">
<div id="video-container">
<video id="videoplayer" playsinline muted autoplay>
<source src="videos/good_job.mp4"></source>
</video>
<div id="interactive-layers">
</div>
</div>
<div id="pause-play-button">
<img id="play" src="images/play.png">
<img id="pause" src="images/pause.png">
</div>
Js
$(document).ready(function(){
$("#videoplayer")[0].addEventListener("ended", onVideoEnded);
});
function showGif(gifname) {
$("#gif-data").remove();
var gif = $("<div id='gif-data'><audio class='audio' id='gifaudio' autoplay src='" + gifs[gifname].audio + "'></audio><img class='gif' id='animatedgif' src='" + gifs[gifname].gif + "?rand=" + Math.random() + "'></div>")
$("#interactive-layers").append(gif);
}
function onVideoEnded(e) {
showGif("ed22");
}
$("#pause-play-button").on("click", function () {
clearTheTimeout();
if ($("#video-block video")[0].paused == true) {
$("#gif-data").addClass("hidegif");
$("#video-block video")[0].play();
$("#pause").css("display", 'block');
$("#play").css("display", "none");
} else {
$("#video-block video")[0].pause();
$("#audioplayer")[0].pause();
$("#gif-data").removeClass("hidegif");
$("#pause").css("display", 'none');
$("#play").css("display", "block");
}
});
CSS
.hidegif{
display: none;
}
Unfortunately, still, my giffs shows up when I click pause video button,
What am I doing wrong?
I think the problem happens because element 'gif-data' created dynamically. Try to find an element inside the parent static element.
$('#video-block').find("#gif-data").addClass("hidegif");
That should work.
It's a few months old post but in my experience addEventListener not works all the time with Jquery but the .on event works. so when you are listening the ended event, do it with .on and write the showGif function inside it.

Replace video in embedded iframe

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

I want add seek forward and seek rewind buttons in flowplayer for video

I am using flowplayer and I setup the video by this way and I added 2 buttons for fastFwd and rewind
<div class="flowplayer" data-swf="flow/flowplayer.swf">
<video id="myvideo" class="myvideo">
<source type="video/mp4" src=""/>
</video>
</div>
<div> <a id="fastFwd" onClick="seek();return false;">fastFwd</a>
<a id="rewind" onClick="seek();return false;">rewind</a>
</div>
<script>
$("#forward, #rewind").click(function (seek) {
if (api.ready) {
var target = $(this).attr("myvideo") == "forward" ? 5 : -5;
api.seek(api.video.time + target);
}
});
</script>
But the buttons doesn't work
It looks like your ID's are not correct. Either you'll need to change your HTML to have the same ID's in your jquery, or change the ones in your jquery to have the same ones in your HTML.
<script>
$("#fastFwd, #rewind").click(function (seek) {
if (api.ready) {
var target = $(this).attr("myvideo") == "forward" ? 5 : -5;
api.seek(api.video.time + target);
}
});
</script>

Playing a video in slider and then swapping out for an image at end

So I currently have a video playing inside a HeroCarousel slider. There is an image before the slider and another image after the slider.
My code:
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/island-careers/retail.html">
<img src="/media/island/splash/now-hiring-splash.jpg" />
</a>
</div>
<div data-time="9000" data-video="true" data-prev-src="/media/splash/slider-left-black.png" data-next-src="/media/splash/slider-right-black.png" id="video">
<a href="/catalog/island-collections/packing-list/">
<video width="1275" height="557" preload="auto" id="myVideo">
<source src="/media/island/splash/video-2.mp4" type="video/mp4">
</video>
<img src="/media/island/splash/escape-splash.jpg" />
</a>
</div>
<div data-time="8000" data-prev-src="/media/splash/slider-left.png" data-next-src="/media/splash/slider-right.png">
<a href="/catalog/mens-resort-wear/classic-shirts/breaker-striped-red-linen-shirt.html">
<img src="/media/island/splash/breakers-shirt-splash.jpg" />
</a>
</div>
So my issue is that the video is playing when the page loads. When the slide enters into view, the video is already at its completed frame. I want the video to play when the slide enters into view and not when the page loads. The slider adds the class current to the current slide so I started writing the following script in order to get it to play:
//playing video
jQuery(document).ready(function() {
$play = 0;
if($play > 0) {
if(jQuery("article#video").hasClass("current")) {
jQuery("#myVideo").get(0).play();
$play++;
}
}
});
This script is not working completely.
I would also like to swap out the video for the image found underneath it once the video ends (the video should only be played once)
One way to achieve this would be using flags and listening to DOMSubtreeModified and ended event.
for starting the video only when the slide is visible, you can do
var canPlay = false, played = false;
$('.hero-carousel article').bind('DOMSubtreeModified', function(e) {
if(played){ // flag to make sure it is played only once.
$('.hero-carousel article').unbind('DOMSubtreeModified');
}else if($(e.target).hasClass('current')){
canPlay = true; // flag to make sure, playing starts only when slide is current.
var video = $(e.target).find('video')[0];
if(video){
video.play();
}
}
});
$('.hero-carousel article video').bind('play', function(){
if(!canPlay){
this.pause();
this.currentTime = 0;
}else{
played = true;
}
});
and for hiding the video once it is finished, you can do:
$('.hero-carousel article video').bind('ended', function(){
this.style.display = 'none';
});
fiddle demo

cant select dynamic div and use only its image

i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});

Categories

Resources