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");
});
}
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 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>
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'm using video.js to create a playlist video component. I'm trying to loop through an array and place the images in the div "playlistnav". Below is my code. The poster variable is what holds the images.
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Chang URLs to wherever Video.js files will be hosted -->
<link href="video-js.css" rel="stylesheet" type="text/css">
<!-- video.js must be in the <head> for older IEs to work. -->
<script src="video.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="videojs-playlists.js"></script>
<!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<div class="playlistnav">
<h1></h1>
<button type="button" data-action="prev">Previous</button>
<button type="button" data-action="next">Next</button>
</div>
<div class="wrapper">
<div class="videocontent">
<video id="videoplayer" class="video-js vjs-default-skin vjs-fullscreen" controls preload="none" width="auto" height="auto"
data-setup="{}">
</video>
</div>
</div>
<script type="text/javascript">
var vid = videojs("videoplayer");
vid.on("ended", function(){
alert("This is the end");
})
</script>
<script>
var videos = [
{
src:['http://stream.flowplayer.org/bauhaus/624x260.mp4'],
poster : 'http://flowplayer.org/media/img/demos/minimalist.jpg',
title : 'Video 1'
},
{
src : ['http://stream.flowplayer.org/night3/640x360.mp4'],
poster : 'http://flowplayer.org/media/img/demos/playlist/railway_station.jpg',
title : 'Video 2'
},
{
src : ['http://stream.flowplayer.org/functional/624x260.mp4'],
poster : 'http://flowplayer.org/media/img/demos/functional.jpg',
title : 'Video 3'
}
];
var player = videojs('videoplayer');
player.playList(videos, {
getVideoSource: function(vid, cb) {
cb(vid.src, vid.poster);
}
});
$('[data-action=prev]').on('click', function(e) {
player.prev();
});
$('[data-action=next]').on('click', function(e) {
player.next();
});
</script>
</body>
</html>
Try something like this:
document.ready(function(){
var nav = $('.playlistnav');
$.each(videos, function(i,val){
nav[i].append("<img src=" + $(this).poster + ">");
});
});
JSFiddle: http://jsfiddle.net/skoshy/7CMsn/
The only part I added is this:
for (x=0; x < videos.length; x++) {
$('.playlistnav').append('<img width="200" src="'+videos[x].poster+'"/>');
}
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();
}