I used a simple random number generator and named my mp4 files "1" "2" and "3" and my html page is blank
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Connor's video clock</title>
</head>
<body>
<script>
< div id = vid >
< video width = "320"
height = "240"
controls >
< source src = Math.floor((Math.random() * 3) + 1) + ".mp4" > Please update your browser < /source>
</script>
</body>
</html>
You can't put html tags within script tags. Additionally, I think HTML tags should not have spaces between the angled bracket and the tag name. Try this instead:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Connor's video clock</title>
</head>
<body>
<div id = "vid">
<video width = "320"
height = "240"
controls>
<source id="vsrc" />
Please update your browser.
</video>
</div>
<script>
document.getElementById("vsrc").src = Math.floor((Math.random()*3)+1) + ".mp4";
</script>
</body>
</html>
Here, the javascript fills in the src for the video by selecting that element (by using document.getElementById()) and then altering the src attribute.
I guess what you want is to display a video where its source is assigned by your javascript function. The problem your code cannot run is you are not writing javascript in the script tag. What you have written inside are actually HTML tags. Attached an example for your reference. According to this changing source on html5 video tag , it may not be possible to change source from function. Change the src attribute in video tag instead.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var srcLinkSuffix = Math.floor((Math.random() * 3) + 1);
var video = document.getElementById('video');
var srcLink = "video_"+srcLinkSuffix+".mp4";
video.setAttribute("src", srcLink );
});
</script>
</head>
<body>
<video width="320" height="240" controls src="" id="video" />
</body>
</html>
Related
I'm creating eLearning content in an application called MadCap Flare.
I'm trying to get the intro bumper video to play and then after the video is done it moves on to another page (we will say url for this forum).
Here is my code, and I cannot get this to work at all. The video plays but it will not move on to the url. When I view source code I see it put in a CDAT error.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementsByTagName('video1')[0];
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
You forgot to add the id attribute to the video tag. Try this :
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video id="video1" MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementById('video1');
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
I'm a new in this world.
I won't be questioning every step promised ^^' but, I am following a tutorial which is pretty good but the problem comes when the < video > tag part in JS, which is from 2014...so there are probably updates since then.
Well, I can't get the < video > working when I wish to press the "Play" button. I've done the same as him + the possible updates (such as: simple "()", type for source, etc). Nothing :/
However, if I add into HTML sheet, (< script > tag) it works....
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>CANARIAS</title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="1404.47">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="main.js">
</head>
</script>
<body>
<section id="video">
<video id="mivideo" width="720" loop>
<source src="/video/video-2012-04-05-14-22-32.mp4" type="video/mp4">
<source src="/video/video-2012-04-05-14-22-32.ogg" type="video/ogg">
<source src="/video/video-2012-04-05-14-22-32.webm" type="video/webm">
</video>
<nav>
<div id="botones">
<button type="button" id="reproducir">Play</button>
</div>
<div id="barra">
<div id="progreso"></div>
</div>
</nav>
</section>
</body>
</html>
JAVASCRIPT
var mivideo, reproducir, barra, progreso;
function comenzar() {
mivideo = document.getElementById("mivideo");
reproducir = document.getElementById("reproducir");
barra = document.getElementById("barra");
progreso = document.getElementById("progreso");
reproducir.addEventListener("click", clicando, false);
progreso.addEventListener("click", adelantando, false)
}
function clicando() {
if ((mivideo.paused==false) && (mivideo.ended==false)) {
mivideo.pause();
reproducir.innerHTML = "Play";
}
else {
mivideo.play();
reproducir.innerHTML = "Pause";
}
}
window.addEventListener("load", comenzar, false);
If you thinks that it work fine with internal Js but not with external one, Then I thinks that the problem is that you haven't linked your JavaScript file with you HTML one.
Check out the complete guide on how and where to correctly link a Js file in HTML...
I am trying to create a video element using the 'media-element-and-player' which is a plugin for creating a custom video player.
It is working fine when i create the element myself but it doesn't work when the video element is dynamically created by JQuery.
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source
type="video/mp4" src="batman.mp4"></video>';
div.append(video);
</script>
</body>
</html>
How to achieve this?
And thanks in advance!
This should do the trick:
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- Add any other renderers you need; see Use Renderers for more information -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css" />
</head>
<body>
<div class="video-preview">
</div>
<script type="text/javascript">
var div = $('.video-preview');
var video = '<video class="mejs__player" preload="true"><source type="video/mp4" src="batman.mp4"></video>';
div.append(video);
// After adding dynamically new video element, you should initialize the mediaelement plugin on that node as when the page loads this isn't rendered
$('.video-preview video').mediaelementplayer({
pluginPath: "/path/to/shims/",
success: function(mediaElement, originalNode, instance) {
// do things
}
});
</script>
</body>
</html>
I wonder why the following doesn't work:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Iframe</title>
<style>
</style>
</head>
<body>
<iframe name="myFrame"></iframe>
<script>
window.frames["myFrame"].style.background = "green";
</script>
</body>
</html>
However, if you access the iframe directly using its ID, it works with no problem:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Iframe</title>
<style>
</style>
</head>
<body>
<iframe id="myFrame"></iframe>
<script>
document.getElementById("myFrame").style.background = "green";
</script>
</body>
</html>
How can I use window.frames to get the first code to run properly?
I think you have to do a for loop to find all the frames and then access them by their index.
for(var i=0; i < frames.length; i++) {
console.log(frames[i]);
}
This doesn't work for you, because it will return the window object inside of the frame and not the iframe element. If you want to use the name attribute you can use document.getElementsByName("myFrame")[0] but I'd recommend accessing it by id.
It should work the same for getElementsByName, mind you that it returns an array of element, not an element.
Both statements should have the same effect for frame with name of "myFrame", and id of "myFrame":
document.getElementsByName("myFrame")[0].style.background = "green";
document.getElementById("myFrame").style.background = "green";
here is my code to print a pdf file. here while printing time iam getting one page only i need a solution for that
function printPdf(){
var ifr = document.getElementById("frame1");
//PDF is completely loaded. (.load() wasn't working properly with PDFs)
ifr.onreadystatechange = function () {
if (ifr.readyState == 'complete') {
ifr.contentWindow.focus();
ifr.contentWindow.print();
}
}
}
I suspect that's because the whole window gets printed (which has the current view of the iframe with the 1st page of the PDF rendered). Use <object> instead:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script>
function PrintPdf() {
idPrint.disabled = 0;
idPdf.Print();
}
function idPdf_onreadystatechange() {
if (idPdf.readyState === 4)
setTimeout(PrintPdf, 1000);
}
</script>
</head>
<body>
<button id="idPrint" disabled=1 onclick="PrintPdf()">Print</button>
<br>
<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"
width="300" height="400" type="application/pdf"
data="test.pdf?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">
<span>PDF plugin is not available.</span>
</object>
</body>
This code is verified with IE. Other browsers will still render the PDF, but may not print it.
[UPDATE] If you need dynamic loading and printing, the changes to the above code are minimal:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script>
function PrintPdf() {
idPdf.Print();
}
function idPdf_onreadystatechange() {
if (idPdf.readyState === 4)
setTimeout(PrintPdf, 1000);
}
function LoadAndPrint(url)
{
idContainer.innerHTML =
'<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"'+
'width="300" height="400" type="application/pdf"' +
'data="' + url + '?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">' +
'<span>PDF plugin is not available.</span>'+
'</object>';
}
</script>
</head>
<body>
<button id="idPrint" onclick="LoadAndPrint('http://localhost/example.pdf')">Load and Print</button>
<br>
<div id="idContainer"></div>
</body>
<iframe src="teste.pdf" id="meupdf" width="800" height="600" />
function printPdf) {
var PDF = document.getElementById("meupdf");
PDF.focus();
PDF.contentWindow.print();
}