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>
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>
Hello everyone i am making drag and drop web application. I am not able to run console.log("Dragging element"); inside addEventListener. Can anyone help me with this.
Below are 2 files that i have made yet
index.js
const dropZone=document.querySelector(".drop-zone");
dropZone.addEventListener("dragover",(e)=>{
console.log("Dragging element");
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inShare - Easy file sharing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="upload-container">
<div class="drop-zone">
<div class="icon-container">
<img src="./file.svg" alt="File icon" draggable="false" class="center">
<img src="./file.svg" alt="File icon" draggable="false" class="left">
<img src="./file.svg" alt="File icon" draggable="false" class="right">
</div>
<div class="title">Drop your files or,<span class="browseBtn">browse</span></div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>
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
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 take a video photo from youtube by iframe.
You can see it when you click on HTML button so the photo is load up but I also try to make the photo to change to a video in the iframe after I click on the picture. Thanks to all..!
This is the HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<header></header>
<nav>
<a target="page" id="img" onclick="html()" href="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg">
<button>HTML</button>
</a>
</nav>
<iframe name="page" src="" frameborder="1"></iframe>
<footer></footer>
</body>
</html>
This is The JAVASCRIPT:
function html(){
var iframes = document.getElementById('iframes');
iframes.innerHTML ='https://www.youtube.com/embed/bWPMSSsVdPk';
}
Is this something like what you are looking for?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css"/>
<style>
.hidden {
display: None;
}
.shown {
display: "";
}
</style>
<script>
function html(img) {
var iframe = document.getElementById("frame");
img.setAttribute("class", "hidden");
iframe.setAttribute("class", "shown");
}
</script>
</head>
<body>
<header></header>
<nav>
<button>HTML</button>
</nav>
<img src="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg" frameborder="1" class="shown" id="image" onClick="html(this);"/>
<iframe id="frame" name="page" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="1" class="hidden"></iframe>
<footer></footer>
</body>
</html>
You might want to fiddle with the height and width attributes of your elements, but this is how I would achieve the result you're looking for.