Can't reproduce mi video with Javascript - javascript

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...

Related

Redirect after a video has ended

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>

Proper onload() for multiple <video>

Why doesn't image show on load, but shows on refresh?
My problem is like the one above, except with multiple video files. On Chrome, videos won't display unless after refresh. On Safari, they seem to display fine. Per the other answer, I'm assuming this has to do with files loading asynchronously and can be fixed by proper use of onload in my jquery, but I'm unfamiliar with how to best do that.
HTML
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/hinukan/style.css">
</head>
<body>
<div id = "container">
<div id="box1" class = "box">
<div id="video1" class="video"> <video poster loop muted playsinline controls><source src=assets/portrait.mp4></video></div>
<div id="text1" class="text"><p>mytext</p></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/hinukan/javascript.js"></script>
</html>
JAVASCRIPT
if ($(".video").css("max-width") == "850px" ){
$(".box").children(".text").click(function() {
$(this).toggleClass("ttoggle");
$(this).siblings(".video").toggleClass("vtoggle");
});
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
}
else {
$(".box").children(".video").click(function () {
if (!$(this).hasClass("vtoggle")) {
$(this).siblings(".text").toggleClass("ttoggle");
$(this).toggleClass("vtoggle");
}
});
$(".box").children(".text").click(function() {
if ($(this).hasClass("ttoggle")) {
$(this).siblings(".video").toggleClass("vtoggle");
$(this).toggleClass("ttoggle");
}
});
$(".video").hover(function () {
$(this).siblings(".text").addClass("tselect");
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
$(this).siblings(".text").removeClass("tselect");
});
}

How to catch 'stop' event in HTML5 audio and then do something?

I'am beginner in HTML5 and not even middle in JS, but I'am trying to figure out how to correctly use <audio> and smth else... so i've got this question... my html:
<i class='some_icon' onclick='play();'>
<audio src='some_mp3.mp3' id='player'></audio>
</i>
Now when I click on the icon I want some mp3 file play and it works because I wrote this js:
function play() {
var my = document.getElementById('player');
if (my.paused) {
my.play();
} else {
my.pause();
my.currentTime = 0
}
}
BUT, besides, I want to change my icon WHEN that mp3 file ENDS... how can I do that? Any help will be greatly appreciated :)
Here is the code to trigger some code when your audio ( or video ) ends:
var my = document.getElementById('player');
my.addEventListener("ended", function(e){
// here goes your code to change the icon
}, false);
I know this was answered/accepted yesterday but i just thought I'd share a full working bit of code for future users benefit. (the sound clip is only 4 secs long)
function play() {
var my = document.getElementById('player');
my.currentTime = 0;
/**this one loops***/
if ($('.btn').find('span i').hasClass('fa-stop')) {
$('.btn').find('span i').removeClass('fa-stop').addClass('fa-play-circle');
$('.texto').text("Play");
}
if (my.paused) {
my.play();
} else {
my.pause();
my.currentTime = 0;
}
my.addEventListener("ended", function(e) {
$('.btn').find('span i').removeClass('fa-play-circle').addClass('fa-stop');
$('.texto').text("Stop");
});
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Audio Icon Toggle</title>
</head>
<body>
<div id="music">
<h2>Audio Icon Toggle</h2>
<button type="button" class="btn btn-success" data-toggle="collapse" data-target="#player" onclick="play();"><span><i class="fa fa-play-circle" aria-hidden="true"></i> <span class="texto">Play</span></span>
<audio src="http://www.rachelgallen.com/monkey.mp3" id="player" class="collapse"></audio>
</button>
</div>
</body>
</html>

random video generator in HTML

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>

Jump to timestamp in HTML5 embedded Video with video-js

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()
});

Categories

Resources