Hy,
Is there a way to make hover on item image, but when is hover plays video?
Something like this but not in popup:
Demo
Thanks in advance
This is not possible out of the box.
I'm sure this is a paid extension for this but if you would like to code it the good old fashioned way you can use jQuery and HTML5 video player to achieve this.
<video id="video" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<a id="thumbnail">Im the thumbnail</a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery('#video').show();
jQuery('#video').play();
}, function() {
jQuery('#video').hide();
jQuery('#video').pause();
});
});
</script>
What I suggest is linking the video and thumbnail either via a data-attribute:
e.g
<a id="thumbnail" data-video="#video"></a>
<script>
jQuery(document).ready(function($) {
jQuery('#thumbnail').hover(function() {
jQuery(jQuery(this).data('video')).show();
jQuery(jQuery(this).data('video')).play();
}, function() {
jQuery(jQuery(this).data('video')).hide();
jQuery(jQuery(this).data('video')).pause();
});
});
</script>
on the thumbnail or making it relative to a parent container for multiple videos.
Related
Hi all website development experts,
I am a newbie to website design.
I am 13 years old but my passion is to record my own music from the different instruments I play and I love singing as well.
I am trying to make my own online Music Library so that people can listen to some of my songs in full for free or listen to a preview of my songs and buy them online.
I have created an Album Web Page which displays all the songs I have uploaded to my ISP's Web Server.
I have either a Free Play or Preview Button listed for each song in the Album.
If the users click on this Image Button, I want it to change onclick to a Pause Button.
If the users then click on the Pause Image Button I want it to change back to the Free Play or Preview Button.
I also want the Song to continue to play from where the user clicked on the Pause Button until either the end of the song or the end of the preview length of 15 seconds for the song, if it is available as a Preview Song.
What is the easiest way to achieve this.
I have the following code so far:
Javascript:
<script>
function play(id){
var audio = document.getElementById('audio'+id);
audio.play();
}
function pause(id){
var audio = document.getElementById('audio'+id);
audio.pause();
}
function changSRC() {
document.getElementById("imageid").src="/images/Song_Pause.png";
}
</script>
HTML:
<html>
<body>
<audio id="audio1">
<source src="/songs/Hall-of-the-Mountain-King.mp3" type="audio/mpeg">
<source src="/songs/Hall-of-the-Mountain-King.ogg" type="audio/ogg">
</audio>
<img src="/images/Free_Play.png" align="center" width="100%" alt="Free Play" onclick="changSRC()" />
<audio id="audio2">
<source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.mp3#t=0,15" type="audio/mpeg">
<source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.ogg#t=0,15" type="audio/ogg">
</audio>
<img src="/images/Preview.png" align="center" width="100%" alt="Song Preview" onclick="changSRC()" />
</body>
</html>
Now I am stuck.
How do I continue on from here to get the Songs to play again from when the user clicked on the Pause Button from the point they clicked on the Pause Button until the end of the 15 second preview or until the end of the song for the Free Play songs.
I will really appreciate any help. Thank you so much in advance!
Kind Regards,
Nancy
you can put the free_play_or_preview and id parameters in "changSRC" and give parameters according to the song. In my solution if free_play_or_preview parameter is "f" image is free play image else image is preview image and you can find which element has which image with id parameter
Here is my solution :
<!DOCTYPE html>
<html>
<body>
<audio id="audio1">
<source src="/songs/Hall-of-the-Mountain-King.mp3" type="audio/mpeg">
<source src="/songs/Hall-of-the-Mountain-King.ogg" type="audio/ogg">
</audio>
<img id="img1" src="/images/Free_Play.png" align="center" width="100%" alt="Free Play" onclick="changSRC('f',1)" />
<audio id="audio2">
<source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.mp3#t=0,15" type="audio/mpeg">
<source src="/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.ogg#t=0,15" type="audio/ogg">
</audio>
<img id="img2" src="/images/Preview.png" align="center" width="100%" alt="Song Preview" onclick="changSRC('p',2)" />
<script>
function play(id){
var audio = document.getElementById('audio'+id);
audio.play();
}
function pause(id){
var audio = document.getElementById('audio'+id);
audio.pause();
}
function changSRC(free_play_or_preview,id) {
if(document.getElementById(`img${id}`).src == "/images/Song_Pause.png"){
if(free_play_or_preview == "f"){
document.getElementById(`img${id}`).src == "/images/Free_Play.png"
} else {
document.getElementById(`img${id}`).src == "/images/Preview.png"
}
} else {
document.getElementById(`img${id}`).src="/images/Song_Pause.png";
}
}
</script>
</body>
</html>
I would like to crawl a web page and extracts a video url embedded in the page. I first used Inspect tool and could easily see the embedded link as shown in the picture below:
And the target <video> tag:
<video class="jw-video jw-reset" tabindex="-1" disableremoteplayback="" webkit-playsinline="" playsinline="" preload="metadata" src="https://lh3.googleusercontent.com/YYxKbKt3Apa8A2LkHKBJ7Fx6GU_iCIjEeGyyPJm_Ll-9hO4K8fDZV1pAbYprwpRhS5yFanf7=m18?title=[CayPhim.Net]-Bay-Vien-Ngoc-Rong-Sieu-Cap-tap-6.[360p]"></video>
I then tried to View Page Source tool and searched for the link but I couldn't find it. Instead, I found some javascript code that seems to be used to get and add the link to the page dynamically (at page loading time):
<div id="switchserver" style="height:100%;">
<div id="phim_html5" style="height:100%;">
<div class="loading"></div>
</div>
<script>$(document).ready(function () {
$.ajax({
url: "http://player.cayphim.net/jwplayer7/index_googima.php",
type: "GET",
cache: false,
data: {
"url": "8ce46ffa35805780571877c8ae5808f6a5e8898ebf9d294326735716694ccb4279505da51df9678cc8601a390a422d5e639449ec90332ee518e06f1dd579606d106f292d49bb38d9b2e80d0ee965a5c0e2911922e48ac972c521c4236512d356681404472b2cb39d9fff915bb4da21c8315d3fd6fc6cb0d2ed27183598661d40",
"name": "QmF5IFZpZW4gTmdvYyBSb25nIFNpZXUgQ2FwIHRhcCA2",
"sub": ""
},
success: function (msg) {
$("#phim_html5").html(msg);
}, error: function () {
$("#phim_html5").html("<div class='player-error'>Server quá tải. Vui lòng chọn server khác bên dưới...</div>");
},
});
});
</script>
<img style="display: none" src="http://image.cayphim.net/1553256337-lSC0nSX6Wj9dlOXfK29gK2iwoKF9D0p4YwnxYgmyCwmyBfJ29eW1wKpPetD3BkBKF9D0p4MsZPPjEReTD0UVY0K4YvoGKF9D0p42wODHaQKFo5pGMVmG9XmN05lP80DksxCQaHXKF9D0p4MMJwwhnyohFxsEYKF9D0p4wRJH5xYk1eXEr9mETjpng" />
</div>
Now I used Advanced REST Client to make a GET request to http://player.cayphim.net/jwplayer7/index_googima.php with parameters as specified in the javascript code but I got response containing some thing like this:
<div id="playerjw7">Trình duyệt của bạn không hỗ trợ xem phim bằng Player HTML5. Vui lòng cài đặt Chrome hoặc Firefox</div>
Yeah, it's Vietnamese, but it means "Your browser doesn't support Video Player HTML5. Please install Chrome or Firefox".
How could I programmatically scrape and extract the embedded video url?
I have added this scroll feature with no plugins to scroll up and down a gallery of large images on a single page. My code is not very elegant but the scroll basically repeats itself from image to image on action of click on arrows.
<script>
$(document).ready(function (){
$("#click4").click(function (){
$('html, body').animate({
scrollTop: $("#image2").offset().top
}, 600);
});
});
</script>
<script>
$(document).ready(function (){
$("#click5").click(function (){
$('html, body').animate({
scrollTop: $("#image4").offset().top
}, 600);
});
});
</script>
<div id="top">
<class id="image3"><img src="images/blank.png" alt=""/></class></div>
<div id="gallery">
<img src="images/image3.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click4"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click5"> <span class="arrow-s"></span> </class>
</div>
<script>
$(document).ready(function (){
$("#click6").click(function (){
$('html, body').animate({
scrollTop: $("#image3").offset().top
}, 800);
});
});
</script>
<script>
$(document).ready(function (){
$("#click7").click(function (){
$('html, body').animate({
scrollTop: $("#image5").offset().top
}, 800);
});
});
</script>
<div id="top">
<class id="image4"><img src="images/blank.png" alt=""/></class> </div>
<div id="gallery">
<img src="images/image4.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click6"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click7"> <span class="arrow-s"></span> </class>
</div>
The problem I am having is the images seem to flicker as you move up and down. Two questions.
Is there a simple way to avoid flickering with large images when scrolling.
Can I add a fade in fade out as you scroll into each image and how do I add this to the script. I think this will reduce the amount of flickering and add a nice effect.
Thanks for any advice.
Ive taken a look at what you have posted but I'm not able to get your code working as-is.
firstly, you should try to combine your scripts into 1. for example, you have a function for each click to scroll to 1 image. What you should do is create just 1 function then have that check the image to scroll to. There are many ways that you can do this but here is an example:
$(".clk").click(function () {
var $this = $(this),
img = $this.data('img');
$('html, body').animate({
scrollTop: $("#"+img).offset().top
}, 600);
});
Along with this function, you would need to change your markup like this:
<div id="Div6">
<div id="click7" data-img="image5" class="clk"> <span class="arrow-s"></span>
</div>
</div>
so, I have added a class of clk, this is what is going to call the function now, not clicking on the ID so that we can add this class to as many images as we want. Next, in your functions you are scrolling to the top of an image which is hard coded into each ID function... I have added an HTML Data attribute "data-" and have called it img ("data-img"). So now, when you click on class, you will call the function which will read the attribute and know where to scroll to.
Once you have got this working, please create a jsFiddle (jsfiddle.net) where you paste your html, jquery and css into the boxes and you can run the code there. Then save it and post the link back here for me so that I can see a working version and I'll take another look for you. ;-)
I'm trying to play an HTML5 video when the user scrolls to it using the waypoints plugin for jQuery.
Here is my code:
$(document).ready(function() { videoSetup(); });
function videoSetup() {
var video = $("#video");
video.waypoint(function(direction) {
video.get(0).play();
});
}
Put when the video is scrolled to nothing happens.
HTML markup would look like:
<div class="video-test">
<video id="video1" width="960">
<source src="video-folder/video.mp4" type="video/mp4">
</video>
</div>
Then your javascript to load the video at the video-test container waypoint would be:
$(document).ready(function() {
var myVideo=document.getElementById("video1");
$('.video-test').waypoint(function() {
myVideo.play();
}, {
offset: '50%', // middle of the page
triggerOnce: true // just my preference...
});
});
:D
I am currently having much trouble with a jQuery animation. Basically, a button click will quickly start a short animation and collapse a sidebar, widening the main content box to full width (and back again if wanted). The issue is that with quick consecutive clicks, the layout goes all crazy. I have tried this condition:
if (!$(this).is(":animated"))
{
// Code
}
But it doesn't work. So I have tried .off(), and it shuts off, but I cannot find out how to turn it back .on(). Can someone help me please? Here is what I have:
<script type="text/javascript">
$(document).ready(function(){
var $button = $("a#toggle");
var $content = $("div#index_main-content");
var $sidebar = $("div#sidebar");
// Disable quicky clicky
$button.click(function() {
$button.off().delay(1000).on();
});
// Hide sidebar
$button.toggle(function sidebarToggle() {
$sidebar.fadeOut(500, function() {
$content.animate({width: '100%'}, 500, function() {
$button.attr("title", "Click to show the sidebar!").addClass("hiding").removeClass("showing");
});
});
},
// Show sidebar
function sidebarToggle() {
$content.animate({width: '69.5%'}, 500, function() {
$sidebar.fadeIn(500, function() {
$button.attr("title", "Click to hide the sidebar!").addClass("showing").removeClass("hiding");
});
});
});
});
</script>
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle"></a>
<div id="sidebar">
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">
<!-- Content: float-left/width-69.5% -->
</div>
</div>
Also, there is a live demo here. Like I said before, for some reason, the .on() does not happen. :(
Thank you. :)
$content.stop(true,true).animate({ //code });
Try using stop before issuing the animation the second time, for example:
$content.stop().animate(
This will stop and previous animations before starting the new one.
Also use true in the stop statement to cancel other animation and complete the animations.
$content.stop(true,true).animate(
See:
http://api.jquery.com/stop/
stop() to stop the current animation,
clear the animation queue and go to the end of the animation .stop(true,true)
or
turn the button to OFF before you start the animation
turn the button to ON within the animation callback function, so that
is turned on again after the animation finished
OR more easy
<div id="index_content">
<a title="Click to hide the sidebar" class="showing" id="toggle">Click me</a>
<div id="sidebar">sidebar
<!-- Sidebar: float-right/width-28.5% -->
</div>
<div id="index_main-content">content
<!-- Content: float-left/width-69.5% -->
</div>
</div>
$(document).ready(function(){
$('#toggle').click(function(){
$('#sidebar:visible').fadeOut('slow')
$('#sidebar:hidden').fadeIn('slow')
})
})
take a look#
http://jsfiddle.net/jdFrR/