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">.
Related
I've noticed, that there is large qwerty keypad in some apps(Facebook, Browser), that differs from popup. How do I use it in SDK.
P.S. I have multi-scene app, with ime module included in app.json
I found out from Samsung support, that you can use IMEShell_Common object.
First you include these:
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/ime.js'></script>
<script type='text/javascript' src='$MANAGER_WIDGET/Common/IME_XT9/inputCommon/ime_input.js'></script>
in body tag
After you can use shell like this:
var imeBox = new IMEShell_Common();
document.getElementById('search').focus();
imeBox.onShow();
In Samsung this can be achieved by IME. A very well described step by step procedure is mentioned in the below link. It also has a sample app that demonstrate the full functionality:
http://www.samsungdforum.com/Guide/tut00049/index.html
Here is the small demostration:
Load the plugin js:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Plugin.js"></script>
Now load the IME js:
<script type="text/javascript" src="$MANAGER_WIDGET/Common/IME_XT9/ime.js"></script>
Create instance of the plugin:
var pluginAPI = new Common.API.Plugin();
Now register you IME key and initialize it for a text field.
pluginAPI.registIMEKey();
imeMail = new IMEShell("messageText", Main.imeInitId, this);
imeMail.setKeySetFunc('qwerty');
Now just focus on the input field:
jQuery("#messageText").focus();
For more details, please check the above mentioned URL.
Happy Coding!
I'd like to load a video to play on desktops and tablets, but prevent it from loading on iPhones because it's just a graphical element.
Here's my code:
<video width="980" height="400" poster="/poster.jpg" autoplay loop>
<source src="/images/front.mp4" type="video/mp4">
<source src="/images/front.webm" type="video/webm">
Your browser does not support the video tag.
</video>
How can I tell iPhones to not load the video but just display the poster frame?
Thanks.
Something like this should work:
<script>
var videoElement = document.getElementsByTagName("video")[0];
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
videoElement.parentNode.removeChild(videoElement);
videoElement.pause();
}
</script>
This assumes you only have one video element on the page.
Also, be sure to put the JavaScript before the closing body element or put it in an external JavaScript file.
Here is a script that appends the markup for an html5 video to the DOM:
document.body.innerHTML = '<video id="video" controls="controls" src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v" type="video/mp4"></video>';
var el = document.getElementById('video');
document.body.removeChild(el);
document.body.appendChild(el);
jsfiddle demo:
http://jsfiddle.net/h8RLS/2/
This works in all browsers tested, except for Safari on iOS. In iOS, when the HTMLVideoElement is re-appended to the DOM, it is no longer playable.
Has anyone else resolved or encountered this issue?
I don't have an iPad but could reproduce your issue on an iPhone. This seems to be a Webkit error but it can be bypassed easily by changing the src attribute of the video - I hope this is sufficient for your scenario. You can see a working demo here:
http://vidhtml5.appspot.com/jsembed.html
This is the code:
var el = document.getElementById('video');
el.src= "http://mirror.cessen.com/blender.org/peach/trailer/trailer_iphone.m4v";
el.load();
I had the same problem, and I found a workaround using a timer (I'm using jQuery here).
var v = $('#videoID');
v.appendTo( $('#toDivID') );
var timer = setInterval( function() {
clearInterval( timer );
v[0].load();
v[0].play();
}, 200 );
I've only tested it on the iPad2 on iOS 6.1.
You can include two 'source' tags for your video. I've done this on a site and it works great.
<video class="video" controls="controls" id="video1">
<source type="video/mp4" src="demo.mp4">
<source type="video/webm" src="demo.webm">
</video>
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 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>