I can't understand why the waiting event is not firing.
Basically I want the animation in the container to work whenever the video buffers.
Is there any other event that I need to look out for?
function play() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<video onwaiting="play()" controls autoplay>
<source src = "bleach-cool-mp3.webm" type="video/webm" >
</video>
<div id="container">
<div id="animate"></div>
</div>
Two important things:
First: You can't name your function play(), because is a reserved keyword for the video api, you have to rename it
Second: Your onwaiting event is working fine, but it only triggers when your video has to buff the next frames (like slow connection problems). If you want it to trigger when the video is searching for the data to show, like the first loading, use onloadstart event:
Bellow, your working snippet:
function PlayAnimation() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<video onwaiting="PlayAnimation()" onloadstart="PlayAnimation()" controls autoplay>
<source src = "https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4" >
</video>
<div id="container">
<div id="animate"></div>
</div>
Related
I've created a timer that switches and loops between images.
I'm looking to create a pause in between the images in which nothing is shown.
So logo1 on for 15 seconds
hide images for 30 seconds
logo2 on for 15 seconds
and so on
This is what I've got so far.
Ideally, the hide would hide both DIVS
<html>
<head>
<style>
.box1 {
background-color: rgba(0,0,0,0);
color: #fff;
opacity: 1;
align-content: safe;
}
.brandlogo {
background-color: rgba(0,0,0,0);
position: absolute;
top: 500;
left: 1100;
}
.box2 {
background-color: rgba(0,0,0,0);
color: #545454;
position: absolute;
top: 400;
left: 1000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1" id="art">
<img class="brandlogo" id="image" src="logo1.png" width="100">
</div>
<div class="box box2" id="frameart">
<img class="brandframe" id="frame" src="adframe2.png" width="300">.
</div>
</div>
<script type="text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
function timercount() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(timercount, 3000);
$("#art").show();
setTimeout(function() {
$("#art").hide();
}, 500);
</script>
</body>
</html>
Let me know how it goes :)
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
// jquery api on hide
// https://api.jquery.com/hide/
function hideArt() {
$("#art").hide(30000, changeLogo);
}
function changeLogo() {
if (++currentPos >= images.length) {
currentPos = 0;
}
image.src = images[currentPos];
// restart loop
loop();
}
function loop() {
// setTimeout api
// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
setTimeout(hideArt, 15000);
}
// start loop
loop();
</script>
So I've been working on an animation and I cant figure out how to make the animation go backwards. I want it to got down to up, not up to down because obviously rocket ships launch and go up, not launch and go down
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.bottom = pos + 'px';
elem.style.top = pos + 'px';
}
}
}
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: none;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<!DOCTYPE html>
<html>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAEiAK4DASIAAhEBAxEB/8QAHAABAAIDAQEBAAAAAAAAAAAAAAYHAwQFAgEI/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAQFAgMGAQf/2gAMAwEAAhADEAAAAbUAAAAOQdZRuLVPvhG5JtgAAAAAAAAeaTsCso9tkFd2Xm76Rms/k7DEqjAAAAAAHgqXi4M9d2QR7Znwau6v/QLl9Sz4cAAAAABHpDXz2B5sOaq74Ncl8+62cexpzVdqWvA/R7iAAAAAgs6gx2uHOnntd/Zfj8z4Mi6n3LCDTmDTl4AAAAAAg84g5N6vmkAY4cliN9XX1rVx3dNngmca6/mfRAAAAAB5hUwipJKmuaNvOd64XnbC0LH58p1TOL52+Uyk4AAAAANLg9rkEoAABpx6SRkl4AAAAAOfxu5wCWAAA1YzI+CSsAAAAAGGJTKEE4AABzOZs+jtgAAAAAQecQcnAAAIp3YrNj0AAAAAcY61R6OnrmTLPuNkPUcfS8zkuHo/fcIXcFLY9c29EZk2yEAAAI8adYfM0Hqmpt4dFlZHrk9a14ODaOzoRb6zPrXlUMA96m3Wdxhn8Gw5xr8QyZz+R+j3wD5SdsUpotNkVvaAdaXV3YltwFf8/pcyNdWlGpLA5VDqeip+gB5njvSjbLsORlwk0oEYqu3agi32Yxw+j8dyfyKfyNZZrHq/dW8Hmdbmxb6w+J5tSXQVPHb95emxp0QOtTqC2FJpZqJnNgYaE/QFNabHnSaK2ros5MJvNtPcFH6E7ise2tfrkipAgMFuijol/wCrnqC9s4/0SKgD5AJ/oee0dflGXtrmehthAQiI2FAsJNwDOMB8ou9KZ1y+taHAkGUcMsAAItKQAA1axtjnHRAAi0pAAAAAAAAAAAAAH//EAC8QAAAFAQYFBAICAwAAAAAAAAECAwQFBgAREhMgMBAUISM1FSIxNBZAJDIlM1D/2gAIAQEAAQUC/fknqTBs6dOn4oKOGYw0mSQR/SknXqMhwTWOydIKlXR/QqV1y0amXAnwHqFJue3+hUS2fL6GK3Kyu+YQKUhxXW0OS4kY1fmWG9PLZEQiGFLQPxSSuKP3qyVwsSqkNo+LGWTLalDiV/vSffqFxEMV7HploNhpmwUyWyVNsii2YNG1nfZqneS7tW8HD9o3FGSZLDwqLtut6G981aQkFZBRsyAxV2VxWT5SNAhgOSrQ/wAUUby7tM+4ZpQUYpggU48HqBAf0sqKkNUxcUJHmxR+4PQKR8Y8RBw1aiqUUJNspZaSaJA8XUxRDXko+aLiiYM2KI3FhuRpMLoW0pFIvrKsJQlkmUoNoyITaKWkQvj6aG+E3HvRnS/g9Tzq1pbrCbkh9CmfCanP16U8JuSH0KZ8HqdfXpTwm48C9pS3g9Tzo0pfpCbioXpUkN8NqkxujacC6F3aS8dqnDYYiFC6J3ab9q2qpzYYRkXAz3Yrtz+qrOsf8bojcDhwopUISEwnb1x4W35Ae35Aa3rrkbDJyx7PnLrnk1CKE25GQQYJPnzmRFncjJcJlydJOIcKA54S3clGq7hgeKlkX4bM1LFYgONVWzgcFgG8LSo4pNMcEhwObMf2OS8YSZzTa5qQCPakAwn4LBiTi1M1hZ/1lleillz5SLUOzwVTxhT0kLpPVJOOek9ECe4LPvLOfgfmdUwsihcHEFTNXCRyqp6JNbIj2xcKOhspkSNn/lnX9R+ZVTNkdBwvJS6ubEaKk8Kn/TgZQAM3iJBxZxTQA0jHPMtJPpKr/LhUqCUbCc80cQb5G2MSH40f9HROEzIhEb0rDjOpExiMelwkE/SZKW8if/eoAyz8pQKWz9kg+RWRUZO7fAUkTDE6FCAdNABJwpVvmuuLlBNyjKR5452KQuHMcySYN+NWNr2oDeDg2FKJR5eN0zKXLTSpsKdOoZERoq8vbjgxTeh8jzLNqN6KKXNP9VWofx1wzCkKBCaKtJfFQYYp3SuTJkaVRzHep8gDppDEFWW01CTMh6V98tpqfsS8G15SM1t4kqMxpdJ5zaiSd3TKRJX7rfas0Go/8D//xAAvEQABAgUCBAUCBwAAAAAAAAABAgMABAUQERITITAxQRQgJTJhIiMkNUBQUVJx/9oACAEDAQE/AfKKZMFGvEEY4Hk0iV33dSugtWpXbXup78mkM7cuCe9qkzuy6hyB1iXUjQAkxmHXm0D6zDmNRxyAojpG8v8AtBJPXkqVpTmPHrzDa9adXJIzwjwKM5hI0jA/dDIupa3ldLBpRRudrNyLrrW6iCMcD5OsU2mBsbjvWJxvcYUmzKPTVG1Na25ZIioUxL41o90KBScG9IYDr+T2vONbLykRL/lqoYb3HEohKQBi1blwh3WO96CfuKEPvJYQVqiZqr7x4HAgkqOTEsfTVwDjiIl6o+z3yIlZlMw3rTFfPsF6U9tzI+Yrz3taF2F/gXB8i9CewstRWXdb+n+LpVpORE/MeIc1fF23MMrR/l5F/YeCzDqy4srP6j//xAAmEQABAwMDBAIDAAAAAAAAAAACAAERAxASBCEwEyAxMyJBI0BQ/9oACAECAQE/Ae3rBMcVc8RtpzlsX4dQUlaiWJ8Js872EXfwm8cELFuJl0mTtHCy6jrz/U6guWLWneLPUFixfurV52FU3gpsT/mtWeTVKtjs6be9csRvTLIZR+5E8NKfe2mORi+q8IRyeEFARUQj9zWKiJIwweFpfu9cZBaUfu5e1r6kdpWnGBu7SypBg0Xdvkz3qDkMJmho/Y//xABCEAABAgIECAoIBQQDAAAAAAABAgMABBESITEQIDBBUVJxsQUTIjJhYnKBwfAjM0BCY4KRoUNTc7LRFBUk4TRQov/aAAgBAQAGPwL28uu/KnSYrPuqSg3NosEVpR5Y6pNhi6o+jno9jU5+A3yWx44UTTN6ecNIhDrZpQoUj2FSU+sd5A8YCcR2TWbW+UnZ53+wpb9xhP3PkYsu77qjUV3+wEm4Q9MKvcWTiq6LYYdzqRbtz5eZVnKao77ITjLaP4bhGXZb1nN0WKGLaqJptSSmugLoI86cvwaybkBTh890cuWRTpTyd0chx9HzRZOu/SOXOOnYIpWXXe0r+I9Aw2k6aLfrEmvM82UHz9Mu8fymAN384aHphpJ0VrYobmWidFbDwW/qv0fXL8LOdYIwOty7vESLdi3daP8AFkK6PzH1X90en4ORU1mFWjuhC0umY4OVZbe3AUk0pNoMBY/DcSqAdOW4Qd15g+fvE0tN9SJCXPq+L44jWOFbY9XMtkqT0jPDVb3SUxM9x+4iWVpbTuyyzrOqMOsm5aSIQ1YJ6UJFQ++mKFr4lzOhzkkR65K1Zkt8omFPOJomXhxbLQvSIZZPOA5W2JsfCJiUPwwMqs9BhrpKt+ALpLT6ea6m+Kq2pacTmKr4oblpWU61kce6svzR/EVm2YJkfCVuiW2Hecq+eod0S3zfuOO92Duhj5t+Vmf01bolu/8Accd3smGdqt+Vmf01bolu/wDccd3smGdqt+VeHUO6Jf5v3HHePUO6Jf5t5yqx0Q2NClY80fhK3RK7DvyzqdV5Q3Y82fhkRKfpDLcJNakwfP2x5jpoH3hhOhsD7ZbhVrTVX5+uO02L3HUpy1sPL4MfbpKKK1FIN0cpiXd2GiPScGL+VX+ot4OmYs4OmY9HwW73qo8I9HKMt9pVMSX9yda4sOBdCBdbAW2oKSbiDlKz6rTckXmPSnimPy0+MSxTYDycLbbJqrczjMIMu6sqBFKSrDVzIRFeUXyc7ZuMVfVvi9s+GS4trlzKrk6NsF6YWXHTnOBDgvQoHCgarcSqutRhmXOtQMAUk1Vi5QgSs6aH/dXr/wC8hWvdXYhPTCnHTWdVaScKhDJ6KD3YHeyIZOhwYFuaoJik3m3D0wWJg/5Lf/oacdxz8JvkIxX2NVVYYHuyIR2hg4sXuKqxRiNTTfObNvSIS4jmqFIxZh0XpQaITitL91fIOB3siE9rAlvM0PvikaYbGdslGLM7BvEJ2YaopUs+6IpKUy6OvfDhDzjswBSnMIQv3xYrbG1sQ32xC3V3JFMf1Uw44286oqFXRHoVImE/QxUeQptzQoYj/wCsdwxZodSn6WwnZgQyyKXVmgRYKzx5zhvw8cP+JMHldVUMqzFv+Ylx8QQmUb9Q2azyxugJSKALAMHFvop0HOIVKvWkWpOkYa2u4T4eGKpCriKIW2rnNqKTgfm1XI9Gjx89OIpp5NZtV4hhJd4xk08XTeIl2Uqqla6K2iOKZG1Wc4jc0nnMm3YYphUS7ecIFO3Gd1XhxghRhjSsVz34so5oco8/SJIdYn7YrzOukiB0WRLS+ZSqVbMdmZTe0qg7DCEJvcUAISlNwFAxa2o4DDB1UqP2xpxrMHCRExNG5I4tPjjusq99NESjS721knuxpodWn6GmCrVZ/jGWv8xsHw8IZQeeRWVtOQdngvng8ii4nPTjOt66SmJtZzBKcaWdUugNXpo5w9gc/p0VOMNKrf8Aof/EACoQAAECAwcEAwEBAQAAAAAAAAEAESExYSBBUXGRocEQMIHwsdHhQPFQ/9oACAEBAAE/If7yrPcCeEEXzTJgVx8oVYsS8zhJEThAYFRT+IorgSfAHHy+uswSbVgmoVGof4SnbF8Zm0+UMVcI9QBAZEMUaKCx8c9/4Tel4oeY+sLMf2nW6D98fwFDAE5JuC2QMxs1oh7y4R2Nz9+MHojVM2lkHIGRDI01iBQx+X78QiI5yA/YW1QlDqSJiBmpaE4CKboMMjAz74QFOKNWVzImFd8FoGgCNwhXQVE8q6FQCDKKZ4JlIXIX6kVgCpxDnvqSEZl3LqUCuZhsmgg+yYB0PXyy5Mf478UXDeHHHR0mWJieAOHtELEJJNs4Q5icAjwgSiaud6tPhA3DsJEFHvULuOUEXIHHe9270fpAkARc8OUDkESPlcvjE9QogA1L/YhY4kQTgDD5TEwGkqtK2d0nCbooPNTRFbZ04OJppAUFYXgfLhQGhxo8zU4BMOKAIYunPEmZq6Ky4ohjiVSrRB+FSjQQ7tKjbJ1YrcOOkJFYFniFCwrl8mUP4ZhFs6LZrPgOlfw7k4aHdiox9yFqzrYDPEe5HkyG/u+yxLb256LAr1WLu+yxLb256vAr1WPu1OHuRPSIWw6MfcgzTu7VIMbKiA3fm3Rsu9NytqR7pRteTGltXjUQ5TMq6h+8VbIGbi29soU9/wBUHez5AMw9sZOpM1/EAxhId0BCQAESh6YpFAYhI4TCkdYvPlCYeJfRqQyH4sYZj8Rm3VRLXN/3FT8rRAOTB8UJx7uwPnuS1K/5Y5RMCvwNPNegGAJJNe4/epopbSCCadTc5yCJj3DqQEURQQax5CNinF49c9Zqx8rx2meAalX9EEZBm6y6HuQqAAiRDjphSKGZP4vP35hz1wq0Qhx0dnPchiEQNSrj016C0TiBmNiyCKHPq3WqwV+5HxnHQ8gPYIq2d0UElLRQjAIk0eoGTAIg4KDGZn3HG2V1ctOEzrxZejAqH/Br09LgFCTBEzNYUzwmeExhIQsYGJDyBGMcM2IIcWSErHyq0N1URibLlQiecuOgtVPsFsSmZppi785o/Vly7jIpQuSeC42IsmQ2m2T46jQSzALl03l68n0j8UjrUcIubaacwwGqPXQ+Ue6IXDiBThIVUE5pmxnyce3JzIdd9/2ibGU2liSuDFkYOMfoyTl6Bgjr5QU1KSI0wHU5Rm7BD2jrgmtSDBkGcUixPzotZwgeXuyFoGYXDoUBDdzcQUURnB5Z6EuHAOjvP8uyCwc4hQwQ+TAqD0AEPFGvvaWABgDER9jPkLg6hQ3nJsyHYeZpuJsNSlS8Xy2pQABIhwnPiGT7hiAVRO5tNuQmbfuCqEiCYRGsphs1nOVqCU50BHiyMtdtC0N0V7OIoeO1KYnYG2Ygruek21RPkQSHkwwKCyYQ/wCmOV78pDm03oYAYAxGzJk88Vnw1ts/MYCbjcdUDYgYm4x8WqKbJwQ+kkm0Bu5wIaG24z6HjsAlM0wQ8TPW06v2wIRWAvvB+rQqx0Z8YFneF+v8BMCUHIufOf8Awf/aAAwDAQACAAMAAAAQAAAAEIBAAAAAAAAq/wCgAAAAAAAHf7SAAAAAAAFPt2QAAAAAFDluKAAAAAAFOv0pAAAAAAIBEZ7AAAAAACAAAMAAAAAAHAAAMAAAAAAPAAAFAAAAAAEAAADAAAAAAEYGRGAQAAAPL/NVF3IgAOP/ALWZT/8AiAAd4qiipy9wAA5jAQ7gAaKAAnHAA0AAtjAAAgAAAAAQAAAAAAAAAAAAA//EACkRAQABAgMHBAMBAAAAAAAAAAERADEQIUEwUWFxgZGhscHR8CBA4VD/2gAIAQMBAT8Q/GJ8t417VI2IMBq9dPnASDK7n/djqyz/AB4wEi4SdNgZFQfoAZO6ob6awhxaAJySxsMxVaMu7WaLYkz0q5gigIa7EjKm7MbqELZ/phOVOQgRe7PDBIDIxPFwhPJKRrlrxpF+AFhQ850m7+1x7HxmUkULxU9kwmPUnvnTk49XPjSg8zEXZE9dMEkiuAjlycyl5/WlI1QokdMAenz5n0xHkj1q22fYpQcKPdvU4ZayXi+1IqEzoHPzeh3WNzuoY5ntjnW2TvbzShzD6HvjF9Ip8YolZJOZWXrCOt3FzvGdGJtD0l8uPFh8JxKzCZ7NXVFXv+x//8QAIxEAAgIBBAICAwAAAAAAAAAAAREAECEwMUFhIFFAcVCB8P/aAAgBAgEBPxDxIsuljhua640WY9UoOgYzIRQvhHR6BAzpi0QZUwR9aJKYoTuP5QcwUvboaCelF9MOnxhz44SMXtvOKEQRsxnBM6yTi9mGGM3IMwcED+PuuPUM1Bs66zNz9bHJ0bcM5v3eAPgJv2LcjBCD5H//xAAqEAEAAQIDBwUBAQEBAAAAAAABEQAhMUGBIFFhcZGhsRAwwfDx4UDRUP/aAAgBAQABPxD2oteg3ej/AIpy+bROLeRciax7Ybk8M3GTywqXzuZoLm5TxKsrhvbAnuvqNnJf8SflGUBwN6J5Qy9cMxYAeyadGHKuLRNgknc7zJ/w2Vb5iAwdZO8V84Yc3r65d8Odamjp7A3DH/Ct7wZFjtQ1bPLLGM48BT/AoFVYACV6VZkge4pDkTGmzCOE0/k1f1q8B4PvojgveSyzROlGHuzzbvnZzrjqqb3hgjPdXP3gNg3Pp7ppQvZB6Ow+O1XfQLtU0fPlIwDkjelW96UpCXMLhzBrS68xQjvVSedIS99WXvWA+wS2vtMu9a3mKhnoXenMNwO6d1OBdJBu/Ye/dnTpfB6mKrcA5mR0rGdIpcoFrD0d1w24zHR++3NvPuy1lRQGlgbEXQGIizJTyLAKAsOMgVjpcFxbO4oFv71ZtbMjkHCEijBneBpEcxGa+kqHqawsdyEk96H8kllM8oCLMzldpWL6W1JDcCMZhTcrArCJr4YgmSmpJrfAjxN6CGlb1eqiv3ifdCyO7Km82Vj8Vv8ATKvA0MOlXURoHYdCHmwZDmxCHuCYA4jV128JlhJvzgrleT0wZ1PODfGKU8SSsLmCwO4K/Xj6vxY//Pu/l2J9Q9jg/dIcASRcxMkvQTl3GGUmN15tcXBgOQ/CsJBBtZCIsWtKzGEFqmv0+Kvo2A+Pd/MO/wAxwY9CA1Q42/B730MUO9txV0fdB/SqCvrSm+dv82L3jYv2zkexJk/KOp+335b3RX9qqPnb/Lj1ff0Py974HEYdttbP9/wlfzRY97GkdYA9u3r3WCH5KEPu4KRpFgAxVoyqoDG7Qbh4GNGcxhupO1Ec1E9l5pseejVnjnaVH1MCuptIdD4rFK0gDEXLQiXBqASiB94LPuJLmThPg4oCm2yTluWY+dtwULt+WYCXmOnqixuSBIclUvwabZtRngbpEvDm9dzXOJT4VWi+K6abPEh45UGCJwZi2PMZmftE9/sg4RZbsTwL1m9/Q3QYAZBYyopMHZJn4Kwp5yG56b9s5vgtPyPf2et0r22/JaDrTTjHlyzBkvUWCmG3Y5HZwNlqDhtLCZfusRxBdDOlXOelVl98FT6ccWOZc8Vlx++lPxOvpG/3L5r7/Ifj0fL70Q6lArKViMv8porcfTxWSVZeCcSwHEJDmHNjNDZmr6+DmEw85M7nc2b92LguGNfUZ391TXevNWZUdyPxDWshQdBGxKLAc92TgimvCuCf7kTomzwPclOd4ohGBqP02Zf3+SwCeTPT1skft76715rwV2q7dr6HrvQPUVOr6aBobZRN06k9q+q3PRqSejy7kFcjqiayPBol8couqF7KEN5K1J1gAV5kaq+rkKU+1s1/GxIHFYNaT54ECYgvKKQlmm99T41HdWMednpPrlTt9mHj1FMchHa3x6RfH3acVuDflC5VAF+aLETm5GstIFc2rMlJmJVjc3HBGSg1argAQRzLlD79ifNRg2xhDYb2IcZcKgyHYACADcFYNio5RWAdMnhg5jWRMohsDo2yRMvT7HCgeQen/Rs8RXbArs1olRED3H0xU8VgyQ42GrY8F9QI4iMIlxKcT8lYFCiMbxZlsU+kgg3EIAkxjiVDqyjZ3XwYBsXOz78wh3xUYFs1K5YrW1cp+yHzmzNyrL62Nu+6lTZm6sDvR3PO9TudPTZj/k/doWIMSHi5UtIOlAGc0H/lClGuqWgNw2VqR9oNkvIjXXl3CAd4rgnqQAOxs5zv8J+U1+u5te/Gkyb3FMOFKwlCHEDq0EX2WxyqAZeonOxB0rIOpYEzqSlz2Uz0/sMlW45eh/Ls50FpRbvm+Ctf+zEDxD2Bl6ULmsSjiOe20H2+51rO8d4qnbtaOScSzIMH/AzjpY9ZuYLrEF//AAf/2Q==" id="myAnimation" alt="rocket" />
</div>
so ya can anyone help me please
Below this text is my code - I am trying to create the chrome dino game, and so far everything is going well, but I have one problem - after the red block jumps, the dino doesn't stop falling down - while it should. I don't understand where my problem is, as I wrote about the same code yesterday and everything worked just fine. The gravity function can be found in the JavaScript under // Gravity.
Notice how it's code is very similar to the jump function, but it doesn't work as good as the jump function. Any help would be appreciated!!!!!
// HTML Elements + Other Variables
const floor1 = document.getElementById("floor1");
const floor2 = document.getElementById("floor2");
const floor3 = document.getElementById("floor3");
const floor4 = document.getElementById("floor4");
const floor5 = document.getElementById("floor5");
const floor6 = document.getElementById("floor6");
const floor7 = document.getElementById("floor7");
const dino = document.getElementById("dino");
const highBird = document.getElementById("highBird");
const lowBird = document.getElementById("lowBird");
const wideCactus = document.getElementById("wideCactus");
const thinCactus = document.getElementById("thinCactus");
let jump = 0;
// Floor Function
setTimeout(function () {
floor1.classList.add("floor1Animation");
}, 0);
setTimeout(function () {
floor2.classList.add("floor2Animation");
}, 1000);
setTimeout(function () {
floor3.classList.add("floor3Animation");
}, 2000);
setTimeout(function () {
floor4.classList.add("floor4Animation");
}, 3000);
setTimeout(function () {
floor5.classList.add("floor5Animation");
}, 4000);
setTimeout(function () {
floor6.classList.add("floor6Animation");
}, 5000);
setTimeout(function () {
floor7.classList.add("floor7Animation");
}, 6000);
// Jump
document.onkeydown = function (event) {
let key = event.key;
if (key == "ArrowUp") {
let jumpCount = 0;
if (dino.offsetTop == 95) {
let jumpInterval = setInterval(function () {
dino.style.top = (dino.offsetTop - 5) + "px";
jumpCount += 1;
jump = true;
if (jumpCount == 20) {
clearInterval(jumpInterval);
jump = false;
jumpCount = 0;
}
}, 10);
}
}
}
// Gravity
setInterval(function () {
if (jump == false) {
let jumpGravity = setInterval(function () {
dino.style.top = (dino.offsetTop + 5) + "px";
}, 10);
if (dino.offsetTop == 95) {
clearInterval(jumpGravity);
}
}
}, 10);
body {
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
display: flex;
width: 100vw;
height: 100vh;
}
#gameBoard {
width: 1000px;
height: 150px;
border: 2px solid black;
overflow: hidden;
margin: auto;
position: relative;
background-color: white;
}
#dino {
width: 30px;
height: 50px;
background-color: red;
left: 10px;
top: 95px;
position: absolute;
}
.floorBackground {
position: relative;
height: 10px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
.floor {
position: absolute;
top: 140px;
height: 10px;
width: 200px;
}
#floor1 {
right: -200px;
background-color: red;
}
.floor1Animation {
animation: floorAnimation 6s infinite linear;
}
#floor2 {
right: -200px;
background-color: blue;
}
.floor2Animation {
animation: floorAnimation 6s infinite linear;
}
#floor3 {
right: -200px;
background-color: green;
}
.floor3Animation {
animation: floorAnimation 6s infinite linear;
}
#floor4 {
right: -200px;
background-color: purple;
}
.floor4Animation {
animation: floorAnimation 6s infinite linear;
}
#floor5 {
right: -200px;
background-color: brown;
}
.floor5Animation {
animation: floorAnimation 6s infinite linear;
}
#floor6 {
right: -200px;
background-color: orange;
}
.floor6Animation {
animation: floorAnimation 6s infinite linear;
}
#floor7 {
right: -200px;
background-color: yellow;
}
.floor7Animation {
animation: floorAnimation 6s infinite linear;
}
#keyframes floorAnimation {
from {
right: -200px;
}
to {
right: 1000px;
}
}
#keyframes jumping {
}
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>
Dino Game
</title>
<link rel = "stylesheet" type = "text/css" href = "DinoCSS.css">
</head>
<body>
<div id = "gameBoard">
<div id = "floor1" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor2" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor3" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor4" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor5" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor6" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "floor7" class = "floor">
<img src = "Pictures/dinoBackground.PNG" class = "floorBackground">
</div>
<div id = "dino"></div>
<div id = "highBird"></div>
<div id = "lowBird"></div>
<div id = "wideCactus"></div>
<div id = "thinCactus"></div>
</div>
<script type = "text/javascript" src = "DinoJS.js"></script>
</body>
</html>
You should try simplifying your code, it may make the issue easier to find or it may even remove it entirely.
I'd suggest using a velocity system, where every frame you adjust the dino's offsetTop by the dino's current velocity, and then subtract the gravity amount from the dino's current velocity.
This causes the velocity to decrease at a constant rate, but the dino's offsetTop position to decrease at an exponential pace, mimicking real gravity.
Then, to make collision work, just test if the dino is at or above the correct "offsetTop" value before subtracting the gravity. If you find that the dino is below the ground, just set the offsetTop to the ground level and clear the velocity.
I'd also suggest moving your game over to the HTML5 Canvas API, since then you just have to deal with properties of objects rather than DOM element style attributes.
Velocity example with canvas:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 10;
var y = 10;
var VelocityX = 0;
var VelocityY = 0;
const gravity = 0.75;
// width and height of the square
var width = 10;
var height = 10;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
x += VelocityX;
if( x > 500) {
x = 0;
}
if ( y >= 450 ) {
y = 450
VelocityY = 0
} else {
y += VelocityY;
VelocityY += gravity; // Higher values = lower position on canvas
}
ctx.fillRect(x, y, width, height);
}
setInterval(animate, 1000 / 60); // 60 FPS
#canvas {
border: 1px solid black;
}
<canvas id="canvas" width="500" height="500"></canvas>
JSFiddle
I have an embedded YouTube video, but I want to use my own custom image for the face (thumbnail) of the video before and after the video plays. I have it working successfully up to where it shows the custom image in place of the video, and when the image is clicked, the image is removed and the video is loaded and played. Once the video is complete, the image is restored back to what appears to be the video's ready-to-play state.
However, once the image is clicked again to replay the video, the video won't play again. I was hoping that every time my playYouTubeVideo() function is called from the click event listener, that the YT.Player object would reset and load again, but this isn't working.
Any help you can give would be appreciated.
The stackoverflow snippet I created as a demo doesn't actually play the YouTube embed, and you kind of need to be able to see the video end to know what I mean, so I've included and link to a fiddle as well:
https://jsfiddle.net/MichaelVanEs/otq74r3w/3/
$(document).ready(function() {
handleYouTubePlayer();
});
//
function handleYouTubePlayer() {
// YouTube iPlayer API
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//
var player;
var playerContainer = document.getElementById("player");
var iFrameVideo = document.getElementById("iFrameVideo");
var thumbnailWrap = document.getElementById("thumbnailWrap");
//
thumbnailWrap.addEventListener("click", playYouTubeVideo, false);
//
function playYouTubeVideo() {
console.log("Comes into playYouTubeVideo");
iFrameVideo.style.display = "block";
thumbnailWrap.style.display = "none";
//
player = null;
//
player = new YT.Player("iFrameVideo", {
playerVars: {
mute: 1,
autoplay: 1,
},
events: {
"onReady": onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
//
function onPlayerReady(event) {
console.log("Comes into onPlayerReady");
event.target.mute();
event.target.playVideo();
}
//
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) { // Video has finished playing
console.log("Comes into PlayerState.ENDED");
thumbnailWrap.style.display = "block";
iFrameVideo.style.display = "none";
//
event.target.pauseVideo();
event.target.seekTo(0, true);
}
}
}
}
.imgBrd {
box-shadow: 0 0 0 1px #ccc;
}
.vid {
display: block;
width: 550px;
height: 309px;
margin: 0 auto;
}
#player {
position: relative;
}
#iFrameVideo {
display: none;
}
#thumbnailWrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#thumbnail {
position: absolute;
top: 0;
left: 0;
}
#youtubeBtn {
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 70px;
color: rgba(40, 40, 40, 0.95);
height: 100%;
width: 100%;
z-index: 2;
}
#youtubeBtn:hover {
cursor: pointer;
color: rgba(255, 0, 0, 0.95);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="player" class="vid">
<div id="thumbnailWrap">
<img id="thumbnail" class="vid imgBrd" src="https://libapps-au.s3-ap-southeast-2.amazonaws.com/customers/4753/images/dragArticleToGroup-thumb.png" alt="Video thumbnail" />
<div id="youtubeBtn">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</div>
</div>
<iframe id="iFrameVideo" class="vid" src="https://www.youtube-nocookie.com/embed/tgbNymZ7vqY?rel=0&vq=hd720&enablejsapi=1" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Do not create a second YT.Player. Reuse the first player you created when the thumbnail is clicked.
function playYouTubeVideo() {
...
// remove `player = null`
if (player) {
player.playVideo();
return;
}
player = new YT.Player("iFrameVideo", {
...
}
My code is for a website where when you press the movement button the two squares will move and if you press the change colour button both squares will alternate colours. The shapes do these actions at the same time. However, only one square does this while the other does nothing... please help?
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: CadetBlue;
}
div#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: Maroon;
}
</style>
<style>
#containertwo {
width: 400px;
height: 400px;
position: relative;
background: CadetBlue;
}
div#animatetwo {
width: 50px;
height: 50px;
position: absolute;
left: 350px;
top: 0px;
background-color: Olive;
}
</style>
<body>
<p>
<button onClick="myMove()">Movement</button>
</p>
<p>
<button onClick="button_click()">Change Colour</button>
</p>
<div id ="container">
<div id ="animate"></div>
<div id ="animatetwo"></div>
</div>
<div id="box" onClick="button_click();"></div>
<script>
var colors = ["Maroon","Olive"];
function button_click() {
var box = document.getElementById("animate");
var background_color = box.style.backgroundColor;
var i = colors.indexOf(background_color);
if (i === colors.length-1) {
i = -1;
}
animate.style.backgroundColor = colors[i+1];
}
</script>
<div id="box" onClick="myMove();"></div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 1);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
<div id="box" onClick="button_click();"></div>
<script>
var colorstwo = ["Maroon","Olive"];
function button_clicktwo() {
var box = document.getElementById("animatetwo");
var background_color = box.style.backgroundColor;
var i = colorstwo.indexOf(background_color);
if (i === colorstwo.length-1) {
i = -1;
}
animatetwo.style.backgroundColor = colorstwo[i+1];
}
</script>
<div id="box" onClick="myMove();"></div>
<script>
function myMovetwo() {
var elem = document.getElementById("animatetwo");
var pos = 0;
var id = setInterval(frame, 1);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>
Ok... I'll talk about the problem you're having first, then I'll try to give you some advice.
1) First of all upon clicking the "Movement" button you're only calling the myMove() function which is only responsible for moving the animated div, as you select it with:
var elem = document.getElementById("animate");
So if you desire to move both at the same time make sure you're activating the right functions, since I imagine you wanted to call myMovetwo() at the same time perhaps you could do:
function move() {
myMove();
myMovetwo();
}
That way you would call move() and both calls will run.
2) Now about your code, you should really consider isolating the different aspects of your page, and by that I mean isolating CSS, HTML and JavaScript, you can do that using the <link> tag to import your styles and the <script src="path"></script> tag to include your javascript code.
The other advice would be to remove onclick from your html tags and get the click event from your javascript code.
There are some great sources to learn this basics concepts, perhaps codecademy is a great one for starters https://www.codecademy.com/courses/html-javascript-css/0/1
Cheers!