I have my standard video tag which is playing fine in Chrome;
<video width="x" height="y" src="video.mp4"></video>
The video itself plays fine on the iPhone, however, is there no way to listen for events? Any kind of event? I'd like to use the 'ended' event, but even a 'click' or 'play' would be helpful!
The standard
video.addEventListener('ended', function() {
alert('this adds nothing');
}, false);
doesn't work at all, and nor can I track a click event (In the same way) on the video tag.
If not, would it be possible to perhaps add a transparent over the top of the video, track a click event to that as normal but then fire the play event for the video so that the video loads in the separate window as normal?
This works perfectly for me on an iphone/ipad/safari/chrome
$('#video_1').bind("ended",videoFinished);
function videoFinished(e) {
console.log("im done); }
Here is an example from Safari HTML5 Audio and Video Guide
<!DOCTYPE html>
<html>
<head>
<title>Sequential Movies</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src="http://homepage.mac.com/qt4web/sunrisemeditations/myMovie.m4v";
myVideo.load();
myVideo.play();
}
// function adds listener function to ended event -->
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended',myNewSrc,false);
}
</script>
</head>
<body onload="myAddListener()">
<video controls
src="http://homepage.mac.com/qt4web/sunrisemeditations/A-chord.m4v"
>
</video>
</body>
</html>
Related
When i click on a link this will redirect me to another page in my app.
But after that when i am clicking on the mobile's back button it is not redirect me to previous page.
Ca anyone have answer of this question.
Actually device's back button click is also an event in PhoneGap. You can define the beckbutton event as a function.
<html>
<head>
<title>Sample</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", backButtonClick, false);
}
function backButtonClick() {
//Do something here on backbutton click or go back to last page.
window.history.back()
}
</script>
</head>
<body>
</body>
</html>
Its a sample, now tweak your page as you wanted.
Always write the backbutton event on deviceready!
Here is iframe code. This is working properly in all browsers but not in iPhone 5. I am using custom play button on YouTube player screen.
I have already tried class="youtube-player" type="text/html" tricks.
<!DOCTYPE html>
<html>
<head>
<title>YouTube</title>
</head>
<body >
<iframe width="940" height="529" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/yS2PQwPqsCs?controls=0&showinfo=0&hd=0&enablejsapi=1"></iframe>
</body>
</html>
If you are trying in simulator, this wont work. You can play YouTube videos in device only.
when I use the HTML5 <video> element in the iPhone iOS Safari browser and I click on the placeholder it in order to play the video, the full-screen video player is started...
The problem is that especially when user is connected over GPRS/EDGE bearer it takes some time until the video can be started (something must be cached...).
If the user meanwhile presses the "Done" button and returns back to the page and then tries to launch the video player again nothing happens until some part of the video is cached and from user point of view it looks like the video link does not work... Is there any way how to deal with it? Listening for some event, etc.
<html>
<head>
<script type="text/javascript">
function playvideo()
{
var elem = document.getElementById("id-video");
elem.play();
}
</script>
</head>
<body>
<video
id="id-video"
width="200"
height="160"
src="space.mp4"
>
</video>
<input type="button" value="HTMLPlay" onClick="playvideo()"/>
</body>
</html>
BR
Petr
The only thing you can easily do is reduce the size of the video file. This doesn't have to effect all users, just those on slow internet connections (which you can detect this way).
I was wondering whether anyone has tried to use the new tag that comes with HTML5 on the iPhone.
Specifically, I didn't manage to make the pause() command to work.
Below is a portion of the page. As you can see, I'm trying to pause the video 10sec after it started. It works on Safari on a Mac btw.
Has anyone managed to make this work?
<head>
<javascript language="JavaScript">
function timeUpdate()
{
var myVideo = document.getElementsByTagName('video')[0];
var time = myVideo.currentTime;
if (time > 10)
{
myVideo.pause();
}
}
function addListeners()
{
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('timeupdate',timeUpdate,false);
}
</script>
</head>
<body onload="addListeners()">
<video controls src="resources/bb_poor_cinderella_512kb.mp4"
poster="resources/background.png">
Video tag not supported!
</video>
</body>
Thanks,
Ariel
This code is invalid:
<javascript language="JavaScript">
There is no HTML tag called <Javascript>
To set the language to javascript, you should use this:
<script type="text/javascript">
// Code here
</script>
Note that the language attribute is deprecated according to the W3C standard (http://www.w3.org/TR/REC-html40/interact/scripts.html) so you should use type rather than language.
As far as i know iPhone wont let you play video inline in the mobile safari browser.
So pausing wont work ofcourse. iPhone open the video in an external videoplayer, you dont have control over browser features, so the pausing doenst work.
You should use <script>, not <javascript language="JavaScript">.
I'm having strange issues with text on a canvas when using an iPhone or iPad.
Either the text gets drawn properly (rarely), or it gets drawn upside down, or it doens't get drawn at all.
When the text does manage to get drawn, it is wiped when the iPhone/Pad is rotated.
I have the following code. It seems that I can only get the text to stay on the page at all if I use a setTimeout. It seems to be drawn over if I call fillText as soon as the document is loaded.
Anyone else experiencing this sort of problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//draw_b();
setTimeout('draw_b()', 500); ;
});
function draw_b() {
var b_canvas = document.getElementById("cv");
var context = b_canvas.getContext("2d");
context.fillText("Belated hello world", 50, 50);
}
</script>
</head>
<body>
<canvas id="cv" width="300" height="225"></canvas>
</body>
</html>
I have the same problem ,
the earlier version(3.2) doesn't support HTML5 Canvas filltext,
You can use alternative API such stroketext to fix this issue: http://www.netzgesta.de/dev/text/#canvas_api