dbawel Posted December 16, 2015 Share Posted December 16, 2015 Hello, This post is not a question, but is information that I would have found invaluable prior to my having problems playing video on mobile devices - practically all mobile devices. I wanted to create a seperate post for everyone to read, as the post where this dialogue has taken place is labled "console errors." I have been working on an app which relies heavily on playing video files and specifically video textures. I found that almost 2 months ago, I had no problem playing video files and the associated audio on desktops and laptops no problem; but I could not get my video files to playback on most all mobile devices - both Android and Apple phones and tablets. Although at the time, I wasn't focused on inding a solution, as I had other features to build into the application to finish it, and believed that solving video playback on mobile devices wouldn't be much of a problem. So over the past 2 months I spent time each week to try and solve the fact that I couldn't get any video files to play back on my Android tablet, without finding a solution. But now that I have most all features built in the app, I needed to find a solution to be able to take the app into beta testing now as the app is designed to be a mobile app and wouldn't run on most tablets and phones - practically none. As I had used most all available applications to encode and convert video files to .webm and .ogv files for playback on mobile, I began to believe that it was either a bug in babylon.js, or a conflict in my lengthy scripts. So I worked for days trying to find the cause of the problem, and certainly went to the BJS forum where many highly experienced users attempted to help me troubleshoot and solve the video playback problem. However, neither the balon.js community or I could get any video file or format to play on most mobile devices - with the exception of audio playback on some files. So when I was completely lost a couple of days ago, I thought I would focus on analyzing the video files and formats themselves, to make certain that I could rule out video encoding and file conversion. After spending more than 2 days, I finally found that the problem had nothing to do with my scripting or with babylon.js, but that it was an encoding and file format issue. Now I have video and audio playback working on every device I and my friends are able to test, as well as every browser and OS version. Again, I wanted to post this as a new thread, since many users will most likely overlook this discovery and information, since the post where this occured says nothing about video in the title and tags. And I hope that no one else will ever need to face the problems of having no solution or available resources to solve the problem of video palyback on mobile devices. The following is the solution as a quote directly from the post where I and several other users spent considerable time and dialogue over several days with no solution we could find: Finally - I have the video and audio correctly playing on all tested mobile devices, browsers, and OS versions. The problem was a video encoding issue. Although I used every application I could including Premiere, Sony Vegas, and so many others, and attempting to encode videos using literally every online converter to .webm and .ogv, none of these would provide proper encoding for playback on all mobile devices - yet none of these formats which I encoded in various applications and online played back both video and audio correctly on my desktops and of course laptops. And I had no idea if it was a conflict in my scripts, an issue with multiple canvas' and dynamic materials and textures, or some unknown bug I'd had the bad fortune to run into. So the solutions I found are to use either Sony Vegas, Premiere (which I was already using to encode video and audio), although I now prefer and recommend the VLC player/converter for encoding .mp4 video files for the very best control and optimization for an HTML5 video or a videoTexture in babylon.js - within all browsers I tested today. So encoding and playback .mp4 video files using most video editors and encoders was never a problem on desktops and most browsers, but the best solution in my opinion for .mp4 is definately the VLC player/converter. Now, for the main problem which I have been having playback issues for 2 months now, is that I could not encode a .webm or .ogv video file for playback on all mobile devices, and at best, only audio and rarely video playback worked - dependng on the mobile device and the browser on various tablets and phones - both Android and Iphone. So in despair I kept at it, and after trying practically everything I could think of, I spent the past two days just working on encoding and analyzing the resulting video, compression, bitrates, etc. What I discovered is that if I encode both the .webm and .ogv using the FireFogg extension for FireFox, and using the correct advanced settings, I now have video files which so far have played back both video and audio correctly on multiple mobile devices, OS versions, and browsers without fail. I found that I did not need to modify my scene (scripts and application) in any way - that the problem was only due to encoding and conversion of video files. I have read other posts in the past where users have had similar issues and there was apparently no solution, so I hope now that no one else has to go through the lengthy troubleshooting process which I had to do - along with all of the other seasoned users on this forum who aided me as much as they were able. If anyone needs the general conversion settings and specifics I found to universally work for video and audio on most all devices, browsers, and OS versions, please let me know and I'm happy to post these. If you believe this is appropriate to add to the documentation site, I'll certainly update the site - however, these might change in future revisions of browsers and OS versions, but I doubt it. So for me, this is a banner day. Although, it has been one of the most painful periods I've ever spent troubleshooting any application, since there is no consistant documentation online for HTML5 video encoding for mobile devices - as nothing I read online worked. And as working in baylon.js is generally new to practically all of us and evolving rapidly, there was no basis for believing it wasn't in my scripting or usage. I simply tried everything and stumbled upon a very reliable set of encoding solutions. Thank you to all those who responded to my posts and put in the time to provide help. I'm just very happy that I found a solution - not only for me, but for everyone who might now avoid any incompatabilities in the future. I hope that this is valuable info for users now and in the future, and that no one else needs to spent any time troubleshooting video playback on any device or display. Cheers, DB Vousk-prod. and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.