flowplayer multi seek buttons in one page - javascript

I have 2 videos in one page and each video have seek buttons but when I click on seek buttons on the first video the second video also effective. but when I click on the seek buttons in the second video it's working fine, so I want each self-contained independent video
flowplayer(function(api, root) {
$(".rewind").click(function (rebtn) {
if (api.playing) {
//var target = $(this).attr("id") == "forward" ? 3 : -3;
var target = document.getElementById(jQuery(rebtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? -3 : -3;
api.seek(api.video.time + target);
}
});
$(".forward").click(function (fwtn) {
if (api.playing) {
//var target = $(this).attr("id") == "forward" ? 3 : -3;
var target = document.getElementById(jQuery(fwtn).closest('div.video-container').find('video.myvideo').attr('id')) == "forward" ? 3 : 3;
api.seek(api.video.time + target);
}
});
});
<div class="video-container">
<div class="flowplayer player">
<video class="myvideo" id="myvideo">
<source type="video/mp4" src="flow/1.mp4"/>
</video>
<div class="buttons">
forward
rewind
</div>
<div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
</div>
</div>
<div class="video-container">
<div class="flowplayer player">
<video class="myvideo" id="myvideo1">
<source type="video/mp4" src="flow/1.mp4"/>
</video>
<div class="buttons">
forward
rewind
</div>
<div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
</div>
</div>

Your flowerplayer function is running twice, once for each video; therefore, you are binding the click handler to all buttons with class .rewind/.forward twice.
You could make your binding more specific like this:
$(root).on("click", ".rewind", function (rebtn) {...
In this way, each time the function is run, it will only add a handler to the rewind/forward buttons that apply to this player.
You could also probably simplify to one handler:
flowplayer(function (api, root) {
$(root).on("click", ".rewind, .forward",function (rebtn) {
if (api.playing) {
var target = $(this).hasClass("forward") ? 3 : -3;
api.seek(api.video.time + target);
}
});
});
Working DEMO

Related

Stop modal video on close button click

I have made a modal layer that shows a html5 video. This works fine. I am having trouble making the video stop playing once I click the close modal button.
When I close the modal, the video keeps playing in the background. Can anyone help so when I close the modal layer, the video terminates.
Here is my html code, I use the Magnific Popup js for the modal popup
<div id="p1" class="mfp-hide">
<div class="some-element">
<video id="sampleMovie" width="100%" preload controls class="embed-responsive-item">
<!-- .mp4 or .mov -->
<source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
JS code -
* Private static constants
*/
var CLOSE_EVENT = 'Close',
BEFORE_CLOSE_EVENT = 'BeforeClose',
AFTER_CLOSE_EVENT = 'AfterClose',
BEFORE_APPEND_EVENT = 'BeforeAppend',
MARKUP_PARSE_EVENT = 'MarkupParse',
OPEN_EVENT = 'Open',
CHANGE_EVENT = 'Change',
NS = 'mfp',
EVENT_NS = '.' + NS,
READY_CLASS = 'mfp-ready',
REMOVING_CLASS = 'mfp-removing',
PREVENT_CLOSE_CLASS = 'mfp-prevent-close';
/**
if(mfp.st.showCloseBtn) {
// Close button
if(!mfp.st.closeBtnInside) {
mfp.wrap.append( _getCloseBtn() );
} else {
_mfpOn(MARKUP_PARSE_EVENT, function(e, template, values, item) {
values.close_replaceWith = _getCloseBtn(item.type);
});
_wrapClasses += ' mfp-close-btn-in';
}
}
if(mfp.st.showCloseBtn &&
(!mfp.st.closeBtnInside || mfp.currTemplate[mfp.currItem.type] === true)) {
if(mfp.currTemplate.closeBtn)
mfp.currTemplate.closeBtn.detach();
}
appendContent: function(newContent, type) {
mfp.content = newContent;
if(newContent) {
if(mfp.st.showCloseBtn && mfp.st.closeBtnInside &&
mfp.currTemplate[type] === true) {
// if there is no markup, we just append close button element inside
if(!mfp.content.find('.mfp-close').length) {
mfp.content.append(_getCloseBtn());
}
} else {
mfp.content = newContent;
}
} else {
mfp.content = '';
}
_mfpTrigger(BEFORE_APPEND_EVENT);
mfp.container.addClass('mfp-'+type+'-holder');
mfp.contentContainer.append(mfp.content);
},
closeBtnInside: true,
showCloseBtn: true,
Any advice would be so appreciated
<div id="p1" class="mfp-hide">
<div class="some-element">
<video id="sampleMovie" width="100%" preload controls class="embed-responsive-item">
<!-- .mp4 or .mov -->
<source src="videos/sample2.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
<button title="Close (Esc)" type="button" class="mfp-close">×</button>
</div>
<script>
var video = document.getElementById("myVideoPlayer");
function stopVid(){
video.pause();
video.currentTime = 0;
}
//attach event handler to close button
$(".mfp-close").on('click', function(){
stopVid();
});
</script>

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.

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>

How i can stop Youtube running Video in popup that i have popup?

I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds

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

Categories

Resources