I have created a video playing content with jPlayer and additionally, I have added a video img thumbnail gallery to allow users to click and view additional video resources.
Furthermore, I have set the following features for the implementation of the video:
1.) The main video frame will automatically play the default video, this video will always be playing until a user chooses the next/new video
2.) User get to scroll through the scrollable video thumbnail gallery, each video Thumbnail will have a video title and brief description.
3.) When user selects any new video, the new video will replace the current playing video
4.) Users gets to exit the video at any point of the video and it will bring them back to the video page where they can select a new video.
Therefore, these are the following features that defines the behaviour of the video playing content.
Issue:
I have managed to set the video for the following features till feature3. Issue arises at feature 4, whereby when user selects the new video, the new video will be displayed, replacing the current video that is playing however, at this point, there is no way that the user can exit from the video.
I could only exit the video by either refreshing the page or clicking on the back button from the toolbar, this is a behaviour that I do not want. The user should be able to exit the video from the video that is playing.
Hence, how am I able to rectify the issue?? Thanks.
I have attached the code for perusal.
$("#Reading_Video").jPlayer({
ready: function() {},
swfPath: "javascript",
supplied: "webmv, ogv, m4v",
loop: true,
fullScreen: true,
size: {
width: 500,
height: 500
}
}).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
$(this).jPlayer("pauseOthers");
}).bind($.jPlayer.event.click, function() {
// allow for full screen
console.log("fullscreen")
var video_elem = document.getElementById("Reading_Video");
if (video_elem.requestFullscreen) {
video_elem.requestFullscreen();
} else if (video_elem.msRequestFullscreen) {
video_elem.msRequestFullscreen();
} else if (video_elem.mozRequestFullScreen) {
video_elem.mozRequestFullScreen();
} else if (video_elem.webkitRequestFullscreen) {
video_elem.webkitRequestFullscreen();
}
});
$("#Reading_Video").jPlayer("setMedia", {
//set m4v tag to array Footprints VideoList
m4v: "lib/video/Video_1.mp4"
}).jPlayer("play");
$("#Reading_Video").show();
}
function loadVideo(event, videoID) {
$("#EnjoyReading_Video").loadVideoByID(videoId);
event.preventDefault();
}
.playListContainer {
position: absolute;
top: 180px;
left: 1350px;
height: 750px;
width: 550px;
overflow: scroll;
}
.innerScroll {
position: absolute;
overflow-y: scroll;
}
.playListThumb {
position: relative;
width: 300px;
height: 200px;
float: left;
top: 25px;
left: 0;
overflow: hidden;
}
.playListInfo {
position: relative;
right: 0px;
left: 10px;
top: 20px;
float: right;
width: 250px;
height: 230px;
overflow: hidden;
}
.playListTitle {
position: relative;
font-size: 30px;
color: #c66 !important;
font-weight: 700;
}
.playListContent {
position: relative;
font-size: 20px;
color: #000 !important;
font-weight: 300;
}
<div id="ReadingPage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:1921px; ">
<!--Video Div-->
<div id="Reading_Video" style="position:absolute; left: 120px; top: 180px;"></div>
<!--Video Thumbnail-->
<div class="playListContainer">
<div class="innerScroll">
<div id="Thumbnail_1" style="position:relative; width:550px; height: 250px;" data-id="1" data-type="local">
<a href="lib/video/ReadingVideo_1.mp4" onclick="loadVsideo(event, 1)">
<div class="playListThumb">
<img alt src="lib/img/Thumbnail_1.png" style="opacity:1;">
</div>
<div class="playListInfo" align="left">
<p>
<span class="playListTitle"><strong>Video Title</strong></span>
<br>
<span class="playListContent">Video Description</span>
</p>
</div>
</div>
<div id="Thumbnail_2" style="position:relative; width:550px; height: 250px" data-id="2" data-type="local">
<a href="lib/video/ReadingVideo_2.mp4" onclick="loadVideo(event, 2)">
<div class="playListThumb">
<img alt src="lib/img/Thumbnail_2.png">
</div>
<div class="playListInfo" align="left">
<p>
<span class="playListTitle"><strong>Video Title</strong></span>
<br>
<span class="playListContent">Video Description</span>
</p>
</div>
</div>
</div>
</div>
Related
I am trying to load a photos album, with around 40 small photos on mobile.
I do it with :
for(let k=0; k<data.length; k++) {
var item = $(".item").first().clone();
item.removeClass("hidden").find(".itemimg").attr("src",data[k].image);
$(".listings").append(item);
item.on('click', function (){
.......
}
and HTML :
<div class="listings">
<div class="item hidden">
<img class="itemimg">
<img class="checkeditem hidden" src="images/checked.png">
</div>
</div>
On Chrome simulator it works, but on actual device ( iPhone Safari) , I see the first 4 photos , and the photos that hidden (overflow) will not show when i scroll. I can only see the container of them, but not the photos.
When i click on a photo (the background, I don't see it's photo), then all visible elements will appear again.
Is this a memory problem ? how to properly load this list ?
EDIT:
.listings{
width: 94%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 2vh;
}
.item{
float: left;
width: 47%;
height: 30vh;
margin-left: 2%;
margin-top: 3%;
background-color: rgb(245,245,245);
border-radius: 3vw;
overflow: hidden;
position: relative;
}
.itemimg{
object-fit: cover;
width: 100%;
height: 100%;
}
Have no idea why, but removing this :
overflow: hidden;
from my item CSS, solved the problem.
After applying this code I am getting video over Image but I want to add Image over you-tube with play button on it
In this code when I increase the padding of the div which is (padding: 18px) now video get shorter and background Image comes on back
but I want Video should play on clicking Image , video should play on the full container
<div id="background-video" style="background: url(images/fight-c-diff.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allowfullscreen>
</iframe>
</div>
Please Try This:-
<div id="background-video" style="background: url(https://cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg) top center no-repeat; background-size: cover;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
<a class="play-btn" href="#">Play Button</a>
</div>
Js
jQuery('.play-btn').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery('#background-video').find('iframe').show();
jQuery('#background-video').find('iframe')[0].src += "?autoplay=1";
});
CSS
#background-video { width: 640px; height: 360px; position: relative; }
#background-video iframe { width: 100%; height: 100%; display: none; }
#background-video .play-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; line-height: 0px; background: url(http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png) center center no-repeat; background-size: 120px auto; }
Videojs should solve your problem in the easiest way possible :)
Take a look! https://docs.videojs.com/posterimage
I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox
try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}
So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!
This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});
I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle
Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/
I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}