We're making our webapp with ASP.NET MVC 5, and we're facing to an strange behaviour while playing our mp4 videos (codec h264 all of them) between web browsers.
These videos are not stored in filesystem, they're stored like BLOBs inside a table of our SQL Server.
The way we link our BLOBs with the HTML5 video tag is with a source that points to an Action that returns a FileStreamResult with ContentType header set properly.
Firefox and IE can play them, but Chrome can't with all. When I click on the 'Play' button, the videoplayer stills showing a black screen. When this happens and play button is clicked, network tab of the browser shows up two 200 HTTP responses: one with the video full size in bytes and the other one showing 0 bytes. No errors on console.
What's wrong with Chrome? What's wrong with us?
Thank you for your time guys, I'm so thankful to this site :)
After some time of researching, we found that MP4 videos with h264 codec that exceed 5MB/s bitrate are not played by Chrome HTML5 video player.
Until now our solution is reencoding MP4 videos that exceed that bitrate to solve this.
If anyone has a better answer, it obviously will be appreciated ;). We hope it could work for anyone that has the same problem.
Related
My goal is to get an mp4 video i placed in dropbox to work within my Alexa Skill in which I am using an ALP document to include multimedia support. I am not interested in using Amazon S3 storage.
I was following a tutorial by dabbelab.
I could get their video to work: https://player.vimeo.com/external/373749691.hd.mp4?s=e43554c91fc796a20f051dcb8b45a74d035a6daa&profile_id=174
I could not get an mp4 video in my drop box to work:
https://www.dropbox.com/s/i8g0j8ghzprqyp3/Baby%20Cats%20-%20Cute%20and%20Funny%20Baby%20Cat%20Videos%20Compilation.mp4?dl=0
From what I can determine through Amazon's doc, I should be able to use any mp4 as long as I am using https. It is unclear to me what it is I am missing. Any advice greatly appreciated. Thank you.
First thing I'm seeing is the link. It ends with "dl=0." That link opens a dropbox page for playing the video, not the video itself.
Change that to "raw=1" and you should get the video itself like APL needs, not an HTML page.
I'm currently working on a eLearning website where I use html5 video tag to show video tutorials to my users. I'm using the video streaming technique explained here:
https://getpocket.com/redirect?url=http%3A%2F%2Fstudentguru.gr%2Fb%2Feloy%2Farchive%2F2015%2F07%2F13%2Fvideo-streaming-for-mobile-clients-via-asp-net-web-api-2-tutorial.
After I implemented this solution everything works fine, but after a while I realized while video is playing using html5 video tag in chrome, other requests that are sent to the same server, stays pending for a long time. I don't have this issue on other browsers link Firefox. This is because of a specific bug in chrome (https://github.com/videojs/video.js/issues/455). This is a major problem for me because while users are watching videos on my website, I use ajax to save their progress and this issue prevents that. Do you know any workaround to fix this issue? I have used solutions in HTML5 video element request stay pending forever (on chrome) and none of them solved my problem.
Thanks in advanced.
Some questions for playing youtube videos in webBrowser component.
I played youtube video in webBrowser component. But it keeps playing when the form is backed as well. It only stops playing when the app is removed. I tried webBrowser.stop() and webBrowser.destroy() method etc in the back command but with no success.
String getVideoUrl = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";
WebBrowser player = new WebBrowser();
player.setURL(getVideoUrl);
f.addComponent(BorderLayout.CENTER, player);
However webBrowser.reload() solves the problem on android phones but not on Android Tablets.
While viewing the video, if the mobile is set to sleep by the user, the display goes out while watching the video. So how to disable the sleep mode?
Mobile screen display out problem.
When the video completes, the youtube video gives video link of the related videos & they can be played too, how can I disable that. I don't want to make other videos play from the app
The video doesn't play in android icecream sandwich and below.
Try: webBrowser.setPage("<html><head></head><body></body></html>", null);
You can use Display.getInstance().setScreenSaverEnabled(false);.
That's a setting on youtube for embedded links. You can select to disallow it.
That's a limitation of the html embed code from google. Not much we can do here.
I'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.
It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.
The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.
Of course my aim is to display the video also on mobile with autoplay and loop active.
The output which I can see inspecting the page on mobile using USB debugging (chrome://inspect/#devices)
<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque"></iframe>
I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.
Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash:
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".
Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?
I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.
You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.
https://developers.google.com/youtube/iframe_api_reference
You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:
https://github.com/brandly/angular-youtube-embed
I uploaded 2 .mp4 videointo blobstore.
When I served 311.0KB mp4 video, there is no problem with it. I can play the video
But when I served 3.3MB mp4 video, video is not loaded. So I went to admin console, and click Blob Viewer menu. When I clicked to see 3.3MB video, it doesn't load as well. Why?
I am using free version of GAE.
After some time I found out that using the X-AppEngine-BlobKey and X-AppEngine-BlobRange is working fine. I use Django and here is part of the code that I use, it should give you the idea how it works
response = HttpResponse()
response['Accept-Ranges'] = 'bytes'
response['Content-Type'] = content_type
response['X-AppEngine-BlobKey'] = blob_key
if 'HTTP_RANGE' in request.META:
response['X-AppEngine-BlobRange'] = request.META['HTTP_RANGE']
return response
Please note that X-AppEngine-BlobRange is set to exactly the same value as range header in request. GAE documentation for that case might be a little bit confusing as the examples show values like "0-499" when it should be set to "bytes=0-499".