On a very simple webpage I have a video in the background autoplaying and some jquery script to load html content in a div. Strangely enough he javascript function on the links only executes after 12 seconds or so. I think it has to do with the video load as when i replace the video with an image it works properly. Any help appreciated towards solving this. Thanks.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Breathing Room</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="navigation">
<ul>
<li>Abstract</li>
<li>CHI2018</li>
<li>Team</li>
<li>Links</li>
</ul>
</div>
<div class="content" id="content">
Start text here.
</div>
<div class="video-bg">
<video autoplay loop muted poster="_images/background.jpg">
<source src="_images/video.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
and javascript:
$(document).ready( function() {
console.log( "ready!" );
$("#abstract").on("click", function() {
$("#content").load("../pages/abstract.html");
});
});
Instead of add autoplay to video tag. You can put video play in $(document).ready
<video loop muted poster="_images/background.jpg">
<source src="_images/video.mp4" type="video/mp4">
</video>
$(document).ready( function() {
document.getElementByTag('video').play();
$("#abstract").on("click", function() {
$("#content").load("../pages/abstract.html");
});
});
Hope this help
Related
Upon clicking the refresh button a random video from "Folder" should appear. This works well until I decide to integrate CSS via <link rel="stylesheet" href="site.css" /> (The HTML file is site.html). Only a gray box appears and when inspecting it does show the source to be an mp4 file from "Folder" but does not show. Removing the CSS link allows it to work again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="site.css" />
</head>
<body>
<header>
<h1>Generator</h1>
</header>
<main>
<section>
<article>
<video height="800px" controls >
<source id="vsrc" />
</video>
<script>
document.getElementById("vsrc").src = "./Folder/" + Math.floor((Math.random()*266)+ 1) + ".mp4";
</script>
</article>
<article>
<p><input type="button" value="Refresh" onClick="refresh(this)"></p>
<script>
function refresh(){
window.location.reload("Refresh")
}
</script>
</article>
</section>
</main>
</body>
</html>
Idk why but my audio doesn't start playing when i hover over my
Here is the code HTML :
<tr><td class="nav"><img src="naruto.png" draggable="true" id="dragelement1" ondragstart="dragStart(event)" alt="Naruto" height="125px" width="125px" ><audio id="beep" preload="auto"><source src="naruto.mp3"></source></audio></td></tr>
and the Function :
<script>
var beepOne = $("#beep")[0];
$(".nav").mouseenter(function() {
beepOne.play();
});
</script>
I tried to reproduce your Error, following is the code that works fine for me. When I hover over the element, I can hear the specified sound file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td class="nav">
<a href="https://myanimelist.net/anime/20/Naruto">
<img src="naruto.png" draggable="true" id="dragelement1" ondragstart="dragStart(event)" alt="Naruto" height="125px" width="125px" >
</a>
<audio id="beep" preload="auto">
<source src="naruto.mp3"></source>
</audio>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
var beepOne = $("#beep")[0];
$(".nav").mouseenter(function() {
beepOne.play();
});
</script>
</body>
</html>
I'm trying to integrate adocean into my Html5 video player to play ads. Here is my code which I wrote from adocean official documentation.I'm getting xml link from ado object. This XML contains the video SRC (campaign creative, which was created from admin panel), but weirdly I couldn't find a way to play the ad. Any ideas? I have also a Cross-Origin warning message in the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ado</title>
<script type="text/javascript" src="//port80ge.adocean.pl/files/js/ado.js">
</script>
<script type="text/javascript" >
/* (c)AdOcean 2003-2020 */
if(typeof ado!=="object"){ado={};ado.config=ado.preview=ado.placement=ado.master=ado.slave=function(){};}
ado.config({mode: "new", xml: false, consent: true, characterEncoding: false});
console.log("ado",ado)
ado.preview({enabled: true});
</script>
</head>
<body>
<video
id="pSw7GgCkOHRk9cOQs7QRtqsYodMzuEdaWtPajlcRyjf.y7"
playsinline
class="op-player__media"
autoplay
width="320"
height="240"
controls
>
<source src="./assets/Arya Kills The Night King (Alternative Version).mp4" />
</video>
<script type="text/javascript">
ado.master({id: 'pSw7GgCkOHRk9cOQs7QRtqsYodMzuEdaWtPajlcRyjf.y7', crossOrigin:"" ,contentType:'xml', server: 'port80ge.adocean.pl' });
console.log("adoo = ", ado);
</script>
</body>
</html>
So I have a website, which I just use for fun, but I currently have a problem with the website (uppah.net)
I'm simply trying to play a video on the website, but it doesn't show up on Chrome. It works fine on Microsoft Edge and Internet Explorer.
I've read that Google Chrome doesn't support MP4, so I tried to change the video formats into WebM, but with the same result.
I'm using the following code:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Uppah</title>
<link href="style.css" rel="stylesheet" />
<link href="FCNTiGM.gif" rel="shortcut icon" />
<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
}
</script>
</head>
<body onload="load()">
<div id="wrapper">
<video autoplay class="video" loop><source id="vsrc" /> Please update your browser.</video>
</div>
<div id="polina">
<h1>Uppah</h1>
<p>Steam Profile</p>
<p>You won't find any hacks here, noob. :^) </p>
</div>
</body>
</html>
I've tried to change:
<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
}
</script>
Into
<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".webm";
}
</script>
But it doesn't play.
Why don't you append to the wrapper div the whole video element like this
function load() {
var src = Math.floor((Math.random()*11)+1)+".mp4";
var wrapper = document.getElementById("wrapper");
wrapper.innerHTML = '<video autoplay class="video" id="video" loop><source src="'+src+'" type="video/mp4" /> Please update your browser.</video>';
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Uppah</title>
<link href="style.css" rel="stylesheet" />
<link href="FCNTiGM.gif" rel="shortcut icon" />
</head>
<body onload="load()">
<div id="wrapper">
</div>
<div id="polina">
<h1>Uppah</h1>
<p>Steam Profile</p>
<p>You won't find any hacks here, noob. :^) </p>
</div>
</body>
</html>
Here is a working example (just hit "Run with JS" button in the output section): http://jsbin.com/kabibifoqo/edit?html,js,output
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>