How to change the playing speed of videos in HTML5 on mobile? - javascript

According to this site, this is supported in the playbackRate and defaultPlaybackRate attributes, accessible via the DOM. But this is not working on mobile. Example:
<!DOCTYPE html>
<video id="my-video" src="chubby-bubbies.ogv" ...></video>
<script type="text/javascript">
/* play video twice as fast */
document.getElementById("my-video").defaultPlaybackRate = 2.0;
document.getElementById("my-video").play();
/* now play three times as fast just for the heck of it */
document.getElementById("my-video").playbackRate = 3.0;
</script>
The above works on Chrome, and also Firefox 20 and above on desktop.

The answer is simply that Mobile Chrome (Android) doesn’t support playbackRate changes even tho this website says it does: https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement#AutoCompatibilityTable
This is the real browser supported by playbackRate changes on mobile:
Chrome 20+ ✔
Firefox 20+ ✔
IE 9+ ✔
Safari 6+ ✔
Opera 15+ ✔
Mobile Chrome (Android) ✖
Mobile Firefox 24+ ✔
IE Mobile ✖
Mobile Safari 6+ (iOS) ✔
Opera Mobile ✖
I created a website and tested it by first adding the following to the web.config-file:
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
</staticContent>
</system.webServer>
Then I uploaded a simple video to my website and uploaded it to Azure for testing in the different browsers: http://pandasneezy.azurewebsites.net/
I suggest you use Mobile Firefox 24+, and it should work just fine with
:
document.getElementById("my-video").playbackRate = 3.0;

Related

JavaScript Differences between Mobile iOS and Android Safari/Chrome

I have been trying to google around for a few days to find some kind of answer, but is their a difference between how iOS mobile devices understand JavaScript, vs Android?
I currently have some code that works as expected on Android (Chrome/Edge), and on Windows (Chrome, Edge, IE 8). But once we get to iOS devices, it doesn't work as expected.
I also tried to see if I could find an emulator for iOS mobile, or just downloading the mobile Safari browser, but wasn't able to find one (that didn't have a cost related to it).
I found the issue, it was related to the selectors in the code not being completed - Chrome got it, but safari didn't.

JW Player not playing in some browsers

I'm experiencing a very strange behavior of the embedded JW Player. Generally, it plays videos fine in
Safari 10.0.2 (Mac)
Internet Explorer 11 (Windows)
Edge 25.1 (Windows)
Mobile Safari (iOS 10.2)
It also plays fine in all other browsers, but only when I open the video on the preview page in the JW Player Backend (see screenshot, tested in Chrome 55 for Mac).
However, it doesn't play when I embed the player in my Project (locally or in productivity, even if I use the same markup used in the preview page), but only in some browsers, including
Chrome 55.0 (Mac)
Opera 42.0 (Mac)
Firefox 50.1 (Mac)
Chrome 55.0 (Windows)
Firefox 50.0 (Windows)
In these Browsers, the player shows the loading icon for about 1 minute, then it says "Error loading media: File could not be played" (see screenshot, tested in Chrome 55 for Mac).
However, the browsers listed at the beginning can still play the video...
And it doesn't seem to be only me, since my colleagues are experiencing the exact same problem. Can anybody help?
Here's an example embed (expires in 1 day):
<script type='text/javascript' src='http://content.jwplatform.com/players/rUqzk7Ff-JGyYovz4.js?exp=1484212670&sig=e492a1f9aab8910829dabae0e97a1d5a'></script>

Polymer paper element not working in android phone

I am using polymer paper elements in my polymer app. Its looking great in all desktop browsers. I tried this demo in all browsers. It working nice in some android phones (samsung s4). But in some android phones, I could not see anything (Tested using chrome and default android browser on samsung gt i9070, Micromax A90). I tried to load URL of mentioned demo on android webview, It was not working in many phones (Micromax canvas A114).
I gone through browser compatibility page Which shows, It supports in chrome android. but not observed by me. Is this observed by others ?

JW Player 6 plugin not working in Firefox - Drupal

I have installed JW Player 6 plugin in drupal 7. It works fine in IE 8, Safari and Chrome. But it is not working in IE 9,10 and Firefox. I have used it with the following code:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="ABCDEFGHIJKLMOPQ";</script>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
image: "/uploads/myPoster.jpg"
});
</script>
What can be changed in code to make it work for firefox and IE 9,10 ? Is there any other plugin that works fine for this JW player?
Check out this on playing video: W3 HTML5 Video
Here is the browser file type specs:
From w3schools.com
Other information I was able to obtain showed that Firefox on Windows XP will unfortunately never be able to play .mp4 video, but Windows Vista and Windows 7 will, as far as Mac OS, people claim it is a patient issue.
I would recommend converting this video to a .ogg format, which will play in Firefox on all systems, then putting logic in the code for Firefox and Opera vs. IE, Chrome, and Safari.
Firefox doesn't accept codec H264 which many mp4 videos are encoded. Try with an .ogv or .webm to test, or provide a fallback.

How to debug website which only chrashs on iphone/ipad under windows

after some time googel'ing I decided to ask for help on SO.
Is there a possibilty to debug iphone/ipad mobile safari browser on windows?
I read the tip in iPhone Browser simulator for Windows? to set the user agent of safari to the one of iphone/ipad but it didn't help.
My problem is the following:
I have a page what uses JavaScript and the page works fine in:
desktop firefox + waterbox, IE, Opera, Chrome, Safari (Safari user agent), Safari (iphone/ipdad user agent)
But it the JS doesn't work when I use the page with my fully updated iphone / ipad with its up-to-date mobile safari.
I know desktop safari is only version 5 with unknown if safari 6 will ever come - so I think that the user agents of this safari version are possibly "outdated".
Any suggestions how I can debug my page under iphone/ipad circumstances to find my mistake?
Thanks in advance

Categories