How do I link to snapshots of embedded flash videos instead of the actual flash videos to reduce loading times of a site?
Yes, and in fact this is a method that is often employed. You start with an image with a play button overlay. When it's clicked, the image element is replaced with a flash element that plays the video.
Perhaps something like the following:
<script>
$(function () {
$("img.thumbnail").click(function (e) {
$(e.parentNode).addClass("play");
});
});
</script>
<style>
.toggler .player { display: none; }
.toggler.play .player { display: block }
.toggler.play .thumbnail { display: none }
</style>
<div class="toggler">
<img class="thumbnail" src="thumbnail.jpg">
<div class="player">
<!-- embed your player here -->
</div>
</div>
Related
I have a client who built their site with wpbakery and on their posts are using video player. They want to have it so when the video plays the nav bar disappears. In the inspector I can see that the player has a class of 'video-container' and when the video is playing there is an addition class of 'playing'. I am hoping to check for if video-container has playing then add a class to my nav.
var hideNav = document.getElementsByClassName('video-container playing');
if (hideNav) {
document.getElementByClassName("nav").className = "hidden";
}
I am guessing I need to add an event listener and I am not sure if my hideNav variable is working how I want it to.
Here's an answer that doesn't use jQuery:
const videoEl = document.getElementById('video')
const navbarEl = document.getElementById('navbar')
videoEl.addEventListener('play', () => {
navbarEl.classList.add('hidden')
})
videoEl.addEventListener('pause', () => {
navbarEl.classList.remove('hidden')
})
.hidden {
display: none;
}
<div style="padding: 30px 10px; width: 100%; background: gray; margin-bottom: 20px;" id="navbar">
Navbar
</div>
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" id="video" controls width="400" />
I have a game I am making, and I want to create a splash screen that shows up for 3 seconds before the game starts. However, I am unable to accomplish this because I don't know how to make the splash screen show up successfully, also WITHOUT the game starting to run in the background. (The parades start to move as soon as the game loads)
It's a Mardi Gras game, and there's a parade in the back. I want the splash screen to show up (just a white splash screen with the words "Mardi Gras Parade!" appearing) for 3 seconds, then disappear, and the game starts.
Here is the JSFiddle (which unfortunately does not show the parades moving because I can't attach files to the JSFiddle, sorry).
But here is my repo, if you want to clone it and open it up in your browser to see the full animations.
Basically, the Splash Screen should cover the entire left portion of the game (with the grey road) with a white background. It shouldn't cover the right yellow side that has the scoreboard information. I am trying to achieve this using Jquery, but I am unable to do this. I don't think my Jquery actually works, as there are no animations, and I can still see the game background. I got the very simple code from this StackOverflow post.
This is my Jquery code that controls the Splash Screen:
function splash(param) {
var time = param;
setTimeout(function() {
$('#splash').hide();
}, time);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="splash(3000)">
<div class='outer-container'>
<div class='game-window'>
<div id="splash">
<div id="splash-content">Mardi Gras Parade!!!!!!</div>
</div>
<div id="actualGame">
<div id='player' class='playerObject'>
<img class='player-avatar' src='img/person.png' height='50px' />
<!--person img: src='https://www.google.com/imgres?imgurl=http%3A%2F%2Fclipart-library.com%2Fnew_gallery%2F54-540691_others-clipart-helpful-person-generic-person.png&imgrefurl=http%3A%2F%2Fclipart-library.com%2Fclip-art%2F54-540691_others-clipart-helpful-person-generic-person.htm&tbnid=V19QgOYn0jYyzM&vet=12ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg..i&docid=hVn27RN51ga3yM&w=920&h=830&q=person&hl=en&ved=2ahUKEwidx5GevcrnAhUJ0KwKHQynD9AQMygBegUIARCJAg'-->
</div>
<div id="paradeRoute">
<div id="dottedLine"></div>
<div id="paradeFloats" class="bothFloats">
<div id="paradeFloat1" class='paradeFloat'>
<img src='img/parade_float_1.gif' height='80px' />
<!-- src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2Fb0a85a880dc856c8129f51d506469510_mardi-gras-background-transparent-png-clipart-free-download-ywd_474-256.gif&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Ftransparent-background-mardi-gras-float-clipart-231098.html&tbnid=QDcU0K_06jcQJM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ..i&docid=7_c8q7QtWx89bM&w=474&h=256&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygEegUIARDsAQ -->
</div>
<div id="paradeFloat2" class='paradeFloat'>
<img src='img/parade_float_2.png' height='80px' />
<!-- Adapted from src: https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.clipart.email%2F2075f16e1c812d5ba8ecece2b6924d75_mardi-gras-clipart-at-getdrawingscom-free-for-personal-use-_340-270.jpeg&imgrefurl=https%3A%2F%2Fwww.clipart.email%2Fclipart%2Fmardi-gras-float-clip-art-228088.html&tbnid=_LNqQJQgyaHKcM&vet=12ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ..i&docid=Fv4gfo44aw_StM&w=340&h=270&q=mardi%20gras%20parade%20clip%20art&hl=en&client=firefox-b-1-e&ved=2ahUKEwj40aPwwsrnAhUFgK0KHU4qCkQQMygLegUIARD7AQ -->
</div>
</div>
</div>
</div>
</div>
<!-- Scoreboard -->
<div class='status-window' style='text-align: center'>
<h3>Welcome!</h3>
<hr>
<br>
<p>Score:</p>
<h1 id='score-box'>0</h1>
<br/>
<div>
<b># of beads collected:</b>
<span id="beadsCounter">0</span>
</div>
<div>
<b># of candy pieces collected:</b>
<span id="candyCounter">0</span>
</div>
</div>
</div>
</body>
First remove onload="splash(3000)" from <body>
Create a separate js file and move javascript to end of </body>
...
<script async src="scripts/index.js"></script>
</body>
Script
scripts/index.js
function splash(time) {
return new Promise(resolve => {
setTimeout(() => {
$("#splash").hide();
resolve();
}, time);
});
}
function loop() {
$("#paradeFloats").css({ left: -300 });
$("#paradeFloats").animate(
{
left: "+=850"
},
10000,
"linear",
function() {
loop();
}
);
}
$(document).ready(function() {
// Wait for splash to resolve after 3 seconds, Then call loop()
splash(3000).then(() => {
loop();
});
});
Read more on Promises - Also check out the example section.
CSS
Make the following changes to your CSS, Modify if necessary.
#outer-container {
...
overflow: hidden; // Hide everything outside of #outer-container
}
#splash {
align-items: center;
background-color: #fff;
border: 3px solid #000;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
vertical-align: middle;
z-index: 9999;
}
#splash-content {
font-style: italic;
font-size: 30px;
}
Codesandbox Example
https://codesandbox.io/s/laughing-dream-8c4r9
I am getting a preload box for a img tag from the code below.
<script>
document.addEventListener('DOMContentLoaded', function(){
load()
}, false);
function grab(){
var urlsource = document.getElementById("image").value="";
return urlsource.length > 0;
}
function load(){
var imgurl = document.getElementById("image").value;
document.getElementById("replace").src=imgurl;
return imgurl.length > 0;
}
</script>
<style>
div.output {
height: 200px;
width: 200px; }
img#replace {
display: none;
}
img#replace[src]{
height: 150px;
width: 150px;
position: absolute;
display: inline-block;
}
</style>
</head>
<body>
<textarea id="image" onload="grab();" onkeyUp="load();" onkeyPress="load();"></textarea><br>
<a id="demo1" href="https://www.google.co.nz/">
<div class="output">
<img id="replace"/>
</div>
</a>
</body>
How the preload image can be removed while keeping the DOMContentloaded event? Thanks very much!
Every <img/> must have a src. If it does not, it's treated as broken.
Give it a src, even if that means creating a 1x1 transparent GIF pixel.
<img id="replace" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />
EDIT: On closer inspection, it seems that your code is immediately running when the document has loaded, with the code effectively reading:
image.src = ""; // because the textarea is empty
Of course, this is not a valid image, but it is still an image, so it appears as a broken one. You may want to add an onerror event to the image to hide it if it fails to load.
<img id="replace" onerror="this.removeAttribute('src');" />
(This should work because of your CSS hiding source-less images)
$(document).ready(function() {
$('#map').addClass('scrolloff');
$('#overlay').on("mouseup",function(){
$('#map').addClass('scrolloff');
});
$('#overlay').on("mousedown",function(){
$('#map').removeClass('scrolloff');
});
$("#map").mouseleave(function () {
$('#map').addClass('scrolloff');
});
});
.scrolloff {
pointer - events: none;
}
iframe {
width: 100 % ;
height: 260 px;
}
<div class="overlay" class="map-container">
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2549.8391302717027!2d-74.51093153882466!3d40.53525165221866!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c3c0b7401dac15%3A0x209d581c4bc2ba2a!2s11+Cedar+Grove+Ln%2C+Somerset%2C+NJ+08873%2C+USA!5e0!3m2!1sen!2sin!4v1456722671076" allowfullscreen></iframe>
</div>
I have attached my full code i m working on i have simply applied the concept of the pointer-event function to stop the scrolling of the google. But my code is not working on these iframe. I have to applied the same code to other projects they are working smoothly. But it is not working on these iframe. If i change the iframe address it is working.
I see spaces in pointer-events css property
pointer - events: none;
it should be:
pointer-events: none;
a div with an .overlay exactly before each gmap iframe
Code will something like this.
<html>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>
CSS create the class:
.overlay {
background:transparent;
position:relative;
width:640px;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!
I hope get helped you :)
If you use iframe code, try this:
HTML: wrap iframe in to div ;
CSS: add .scrolloff{pointer-events:none};
Javascript: add the code below;
jQuery(document).ready(function() {
jQuery('.map-canvas').addClass('scrolloff');
jQuery('.my-map').on('click', function() {
jQuery('.map-canvas').removeClass('scrolloff');
});
jQuery('.map-canvas').mouseleave(function() {
jQuery('.map-canvas').addClass('scrolloff');
});
});
.scrolloff{pointer-events:none}
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<div class="map-canvas"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2875.295699663181!2d11.09368201550548!3d43.89114207911383!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132af65dc5ef10bb%3A0x4983a428073d6747!2sVia+Ermolao+Rubieri%2C+29%2C+59100+Prato+PO!5e0!3m2!1sit!2sit!4v1465019144237" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
I have a responsive site with a carousel. The user can embed a youtube video as one of the slides. On desktop this works fine. On mobile however the iframe apparently eats all the swipe events and you cannot swipe past the video. We had to hack around this by substituting an image of the video and then using window.open() open a new window with the video.
It sucks.
Is there a good way to overcome this?
In short, I discovered I was doing it wrong.
The slider script works very well on both desktop. On mobile it works except you cant swipe past the iframe that embeds the video.
My example iframe is:
<iframe width="1280" height="720" src="//www.youtube.com/embed/Lzbr6fPDmkE" frameborder="0" allowfullscreen></iframe> (fyi, its a funny video if you're an Army vet)
I discovered the (somewhat obvious) fact that youtube has a thumbnail url as well. So on mobile I add the following img tag:
<img src="http://i.ytimg.com/vi/Lzbr6fPDmkE/hqdefault.jpg" alt="1300x650" />
I found the answer in this article
The url I used is different than theirs because I ripped it off of an imbedded youtube thumbnail inside a gmail message.
Its mandatory to include below attribute in URL.
rel=0&enablejsapi=1
Note: Go through comment lines and add those slider library files in head section and save it. once everything added you have to open the file in browser. You can able to see the slider. If find any issue please comment below.
$('.slider').click();
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('videoSwipe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(e) {
$('.youTubeVideo').find('.video').addClass('video-overlay');
}
function OverlayOnVideo(playerStatus) {
if (playerStatus == 2) {
$('.youTubeVideo').find('.video').addClass('video-overlay');
var iframeHeight=$('#videoSwipe').height()-40;
var overlayHeight=$(document).find('.video-overlay');
if ( overlayHeight.length >= 1 ) {
overlayHeight.css('height', iframeHeight+'px');
}else{
$('.youTubeVideo .tube').removeAttr( 'style' );
}
}
}
function onPlayerStateChange(e) {
OverlayOnVideo(e.data);
}
$(document).on("click", ".video-overlay", function() {
if (player) {
player.playVideo();
$('.youTubeVideo').find('.video').removeClass('video-overlay');
$('.youTubeVideo .tube').removeAttr( 'style' );
}
});
.youTubeVideo {
position: relative;
}
#wrapper {
width: 30%;
margin: auto;
}
.slick-list draggable {
margin-top: 3%;
}
body {
outline: none;
background: black;
}
:focus {
outline: none;
}
.slick-list.draggable {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="slider">
<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
<div class="youTubeVideo">
<div class="video tube"></div>
<iframe id="videoSwipe" width="465" height="400" src="https://www.youtube.com/embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
</div>
<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/460" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/440" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/420" alt="" width="500" height="400"></div>
</div>
</div>