I have a page which autoplays a video. How would I redirect and/or display a webpage when the video is done being watched? Thanks.
Use the ended event:
var videoElement = document.querySelector('video'); // or whatever
videoElement.addEventListener('ended', function (){
window.location = 'http://newpage.com';
});
See it here in action: http://jsfiddle.net/bCBhD/
"onended" is a standard event for html objects which you can use. Documentation here: http://www.w3schools.com/tags/ref_eventattributes.asp
Related
I took an mp4 video, encoded it for HTTP Live Streaming (HLS) using ffmpeg — resulting in a series of myvideo.ts files and a myvideo.m3u8 playlist — and am attempting to play it using the HTML <video> tag in Safari, with the native HLS capabilities of that browser:
<video id="myvideo" src="myvideo.m3u8" loop="loop"></video>
It plays, once. But despite the "loop" attribute in the video tag, it doesn't loop. It stays frozen on the last frame of the video.
If I try to detect the end of the video using an event listener as described here:
Detect when an HTML5 video finishes
… that event never seems to fire.
The "paused" property in javascript (document.getElementById('myvideo').paused) evaluates to false, even after the video has played once and stopped.
How can I get the video to loop in Safari?
HLS is intended to be a live stream, so it never actually "finishes" in order to automatically loop. I used a JavaScript timer as a hack to get around this:
var LOOP_WAIT_TIME_MS = 1000,
vid = document.getElementById("myvideo"),
loopTimeout;
vid.addEventListener('play', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
loopTimeout = window.setTimeout(function() {
loopTimeout = null;
vid.pause();
vid.play();
}, (vid.duration - vid.currentTime) * 1000 + LOOP_WAIT_TIME_MS);
});
vid.addEventListener('pause', function() {
if (!/\.m3u8$/.test(vid.currentSrc)) return;
if (loopTimeout) {
clearTimeout(loopTimeout);
loopTimeout = null;
}
});
I like to use JSFiddle when designing a new interface because I find it convenient for various tools within. I'm working on the front end of a site where I want to use a video, and unlike an image, I cant just throw it up on imgur and link to it for free instant hosting while I fiddle with the interface design.
So I want to know if I can somehow use a local file on my PC as the source for an HTML video element hosted on a live site. Obviously this is trivial to do with a web project being worked on on my Desktop, but I'm not sure it can be done on a live test.
For example this would work on a page I open from my desktop, living on my PC:
<video id="Video-Player">
<source src="../movie.mp4" type="video/mp4"/>
</video>
But I don't know whether I can do the equivalent with a page living on the web.
Here's how to allow a user to select an image from their local machine. This should get you started in the right direction.
Add a file input button in the HTML
<input type="file" id="file-btn"/>
and the corresponding handler
document.getElementById('file-btn').addEventListener('change', function(e){
readFiles(e.target.files);
})
Then the code to read the files
function readFiles(files){
files = [].slice.call(files); //turning files into a normal array
for (var file of files){
var reader = new FileReader();
reader.onload = createOnLoadHandler(file);
//there are also reader.onerror reader.onloadstart, reader.onprogress, and reader.onloadend handlers
reader.readAsDataURL(file);
}
}
Now, I've only done this with images, but this is how I read the image data.
function createOnLoadHandler(file){
console.log('reading ' + file.name + ' of type ' + file.type)
function onLoad(e){
var data = e.target.result
display(data);
}
return onLoad
}
function display(data){
var img = document.createElement('img');
img.src = data;
var context = canvas.getContext('2d')
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(img, 0, 0, WIDTH, HEIGHT);
}
Here is a demo of the above code.
As a side note, if you try to read images from another domain you'll run into cross origin policy issues. I would think the same problem exists for videos as well.
I'm trying to use the jQuery .load() function on a <webview/> into a Chrome Packaged App.
This is my test did with an iFrame:
$('<iframe />').attr("src", "http://example.org").load(function(){
$(this).addClass("shown");
}).appendTo('#body');
Fiddle: http://jsfiddle.net/m9ws5/1/
The problem is that when I try to use this code in my packaged app replacing <iframe/> with <webview/> it doesn't fire the load event.
I think the problem is that webview are different from iframe, how can I do?
I've found a solution using the Chrome methods:
onload = function() {
var webview = $("#webview");
webview.on("loadstop", function () {
webview.addClass("shown");
});
}
(always read documentation! https://developer.chrome.com/apps/tags/webview#methods)
This script works:
var page = require('webpage').create();
var html = '<h1>Test</h1><img>'; //works with page.setContent and page.content
//var html = '<h1>Test</h1><img src=".">'; //only works with page.content
page.setContent(html, 'http://github.com');
//page.content = html;
page.render('test.png');
phantom.exit();
but adding a src attribute to the img makes it fail silently (page.render returns false and no image is generated).
Setting page.content directly works in both cases but then relative URLs don't. The same thing happens with other tags that load a resource such as link. It doesn't matter whether the linked resource exists or not. Tested in 1.8.1 and 1.9.2.
Is this a bug or have I misunderstood the API?
You can not render webpage if it is not fully loaded.
When you are setting link or src to <img>, It will try to load image asynchronously.
So, it requires to wait for loading finished.
Try following code.
page.onLoadFinished = function(status) {
page.render('test.png');
phantom.exit();
};
page.setContent(html, 'http://github.com');
My company is using Flash throughout the website. We want to upgrade into HTML5, while keep using Flash if the browser doesn't support HTML5. The Flash are converted using Google Swiffy.
I have tried many solution, but they are too complicated. Here is my current idea: I create a new Audio object in try/catch statement, so if the browser supports it, it will print the HTML5 code translated by Google Swiffy, but if it jump into catch statement, it means the browser doesn't support HTML5, I will use the old code. Here is my code:
try {
new Audio();
// Google Swiffy code here
} catch (er) {
// Use many lines of "document.write" for old Flash code
// Many lines for Flash code
}
However, I cannot import the Swiffy runtime into the code, because non-supporting browser will complain the runtime script, and it stuck immediately. So I change my code, to import the script manually like this, but I don't know why it doesn't work:
try {
new Audio();
var js = document.createElement("script");
js.onload = function() {
document.body.appendChild(js);
// Google Swiffy code here
}
js.type = "text/javascript";
js.src = "https://www.gstatic.com/swiffy/v5.2/runtime.js";
} catch (er) {
alert(er);
<!--
displayFlash('abc.swf', 420, 450);
//-->
document.write("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/fpdownload.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,0,0\" width=\"420\" height=\"450\" align=\"middle\"><param name=\"allowScriptAccess\" value=\"always\"><param name=\"movie\" value=\"..\/..\/images\/thap_deluxe.swf\"><param name=\"wmode\" value=\"transparent\"><param name=\"quality\" value=\"high\"><embed src=\"..\/..\/images\/thap_deluxe.swf\" wmode=\"transparent\" menu=\"false\" quality=\"high\" width=\"420\" height=\"450\" allowscriptaccess=\"always\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\"><\/object>");
}
Please suggest me any better solution, or please teach me how to fix the problem with my current solution. Thank you.
I think it is because your js file never loads.
It loads after you append it to the document.
Try it like this:
try {
new Audio();
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "https://www.gstatic.com/swiffy/v5.2/runtime.js";
document.head.appendChild(js); // Add it to the head.
} catch (er) {
alert(er);
<!--
displayFlash('abc.swf', 420, 450);
//-->
document.write("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http:\/\/fpdownload.macromedia.com\/pub\/shockwave\/cabs\/flash\/swflash.cab#version=6,0,0,0\" width=\"420\" height=\"450\" align=\"middle\"><param name=\"allowScriptAccess\" value=\"always\"><param name=\"movie\" value=\"..\/..\/images\/thap_deluxe.swf\"><param name=\"wmode\" value=\"transparent\"><param name=\"quality\" value=\"high\"><embed src=\"..\/..\/images\/thap_deluxe.swf\" wmode=\"transparent\" menu=\"false\" quality=\"high\" width=\"420\" height=\"450\" allowscriptaccess=\"always\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\"><\/object>");
}
// Or if you want it in the body, unless your whole try / catch is already in a window.onload
Replace
document.head.appendChild(js);
with:
window.onload = function(){
document.body.appendChild(js);
}