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
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>
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
Sorry for my English at first :-)
I have a web site! And only one page I need to export to PDF.
I use kendo.all.min.js and it works excellent on desktop browsers!
I read documentation and found that mobile browsers not support (((
But i need export only one page .... Would you so kind help me with this problem! Only this part of code i need to work on mobile devices
My JS: (button.js)
var generatePDF = function() {
kendo.drawing.drawDOM($("#formConfirmation")).then(function(group) {
kendo.drawing.pdf.saveAs(group, "Converted PDF.pdf");
});
}
kendo.pdf.defineFont({
"DejaVu Sans" : "/lk-tst/fonts/Sans.ttf",
});
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name = "viewport" content = "width=device-width, maximum-scale = 1, minimum-scale=1" />
<link rel="stylesheet" href="css/site_001.css">
<script src="/lk-tst/pdfmake/jquery.min.js"></script>
<script src="/lk-tst/pdfmake/kendo.all.min.js"></script>
<script src="/lk-tst/pdfmake/button.js"></script>
</head>
<body>
</div>
<div class="content">
<div id="formConfirmation">
<button onclick="generatePDF().open();">Save as PDF</button>
{pers_plan}
</div>
</div>
<div class="footer">
<div class="copyright">
{copyright}
</div>
</div>
{script}
</body>
</html>
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>
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.