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>
Related
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 want to create a simple chrome App which launches a window, 'window.html', which contains 2 buttons.
1/ #btn1 creates a new window, loading "video.html". A video player,
playing "file1.webm".
2/ #btn2 updtates the source of the video from "file1.webm" to
"file2.webm".
The first part is trivial :)
The second part is tricky.
Is it possible ?
You'll find my files below.
Thank you :)
<!DOCTYPE html>
<html >
<head>
<title>Chrome : Multiple Window</title>
<link href="./css/main.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/test.js"></script>
</head>
<body>
<button id="btn1" type="button" >Launch video Player</button>
<button id="btn2" type="button" >Update Video</button>
</body>
</html>
$(document).ready(function() {
$("#btn1").click(function(){
chrome.app.window.create('video_window.html', {"width":1280, "height": 720});
});
$("#btn2").click(function(){
$('#myvideo video source').attr('src', './video/avatar.webm');
});
});
<!DOCTYPE html>
<html>
<head>
<link href="./css/video.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<video id="myvideo" autoplay loop>
<source src="./video/the_master.webm" type="video/webm">
</video>
</div>
</body>
</html>
chrome.app.window.create accepts a callback which will be invoked with the created window. You can store a reference to this window, and then either execute functions directly on it, or use window.postMessage to communicate with it.
var videoWindow = null;
$("#btn1").click(function() {
chrome.app.window.create('video_window.html', {
"width": 1280,
"height": 720
}, function(window) {
videoWindow = window.contentWindow;
});
});
$("#btn2").click(function() {
videoWindow.doSomething('./video/avatar.webm');
});
Another option, is to use the chrome runtime API to communicate:
chrome.runtime.sendMessage("do-stuff")
chrome.runtime.onMessage.addListener(function(e) {
// do stuff
})
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>
Greetings overflow,
I'm trying to create buttons on a webpage that jump to tagged timestamps for an embedded video with video-js. Far as I can gather, I need to change the currentTime value in order to have the video move to the correct timestamp, however I can't get this to work even when setting currentTime in the initial javascript call.
For example, if I wanted to start 200 seconds into the video:
javascript:
VideoJS.setupAllWhenReady();
VideoJS.DOMReady(function(){
var myPlayer = VideoJS.setup("current_video");
myPlayer.play();
myPlayer.currentTime(200);
});
HTML Snip:
<video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto" poster="./videoposter.png">
<source src="./videosource.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Again, the video plays properly using the video-js player, just the currentTime offset doesn't seem to be applied and the video starts from the beginning. I've tested this in chrome, safari, IE and they all seem to do the same thing so I don't think the problem is browser specific. I must be doing something wrong...
Thanks for your help!
Remove the "VideoJS.setupAllWhenReady();" and it should work. This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Sample styled page</title>
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
<video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto">
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
<script>
//VideoJS.setupAllWhenReady();
VideoJS.DOMReady(function() {
var myPlayer = VideoJS.setup("current_video");
myPlayer.play();
myPlayer.currentTime(200);
});
</script>
</body>
</html>
$(function(){
var myPlayer = _V_("my_video_1");
_V_("my_video_1").ready(function(){
myPlayer.src([
{ type: "video/mp4", src: "http://video-js.zencoder.com/oceans-clip.mp4" },
{ type: "video/webm", src: "http://video-js.zencoder.com/oceans-clip.webm" }
]);
});
});
$(window).load(function(){
var myPlayer = _V_("my_video_1");
myPlayer.currentTime(30);
myPlayer.play()
});