I'm trying to implement HTML5 Video in a site and for that I'm using VideoJS, so far it works great in Firefox and Chrome but my problem comes when I try to play the video with IE9. The player would load and when I click on the Play button, the loading image would appear and it would get stuck without doing anything.
I've checked other websites and they suggest that the MIME Type that the server is sending is wrong but I've checked already that and it's not the case.
Any ideas?
Have you checked to make sure you are mp4 file is using the H.264 compression scheme?
Your issue is common, and the above answer barely scratches the surface.
MP4 files neet to have their indexes written ahead of the video data within the file. IE isn't freezing, it's actually downloading your video all at once. You can inspect this from your console.
The fix is very simple. Download the AIR application QTIndexSwapper2, and run your MP4 files through it. Reload those files to your server and they will seamlessly stream through the VideoJS SWF Player.
Make sure you have controls and autplay
Related
I wrote a vscode extension that creates a webview panel and I'd like to play an audio buffer when the user clicks a button on my page. I have this identical code working in a test page in a browser so I think I'm doing the webaudio part correctly.
I initialized with vscode.window.createWebviewPanel(...).
When I click the button on the page, it looks like the code is working (there are no errors thrown and the expected code path happens) but I don't hear any sound.
Is there something muting the sound in the webview? Is there something I have to do to tell vscode that sound is expected?
Or is it just impossible to make a sound in a vscode extension?
EDIT:
One more detail that I forgot to mention. I am creating the audio buffer in javascript but I am loading a number of small .mp3 files that I'm using as source. So it requires XHR to receive the .mp3 file and decodeAudioData to decode it.
From my experience, Web Audio API works fine in a VS Code webview panel, but its support for audio file types is very limited. It can’t decode .mp3 files or even .wav files.
However, an .oga file (Vorbis-encoded OGG) works.
Would like to understand how AirBnb is able to load a 20MB background video file so fast on their homepage. After inspecting their homepage on WebPageTest, I noticed that the video did not show up in any of the downloaded resources, which made it score so high. When I've tried this tactic, via loading the video asynchronously via AJAX, the video still shows up on WebPageTest as a downloaded resource, but just after the DOM loads. So I'm really not sure how AirBnb is able to make this work. Does anyone have an idea?
AirBnb isn't doing anything special here. They're just starting playback of media using progressive download, which just means playback starts while the video is still downloading.
On their CDN, they have uploaded some fairly large MP4 files with two important characteristics:
The indexing information (MOOV atom) has been moved to the beginning of the MP4 file
The video is encoded in a format and codec that your browser supports
Because of these characteristics, all the site has to do is tell your browser to begin playing the source URL, and it will do the right thing: it makes a web request to the CDN and begins downloading the file. As soon as enough data has been transferred to start playback, it does so.
Finally, I can't say for sure why WebPageTest doesn't show you the video MP4s that are driving the video, but they are certainly there, and the URLs look like https://a0.muscache.com/airbnb/static/Xxxxx-X1-1.mp4. I suspect they're looking at your User Agent to decide which file to send you, and are not sending any video at all to bots like Google and WebPageTest.
You're not getting the real story through WebPageTest. Instead of relying on a third party to evaluate the page in their environment, you should watch the traffic you are actually being sent using Fiddler or the Network tab on Chrome Developer Tools.
Since the release of iOS9, we can render local HTML with a wkWebView using loadFileURL:allowingReadAccessToURL:
This looks good so far, but we are having problems playing a local mp3 from within the HTML.
There is an <audio> tag with a src attribute with a relative path to the mp3 file.
The iOS9-Simulator plays our mp3 correctly, but physical devices don't. Catching the error with JavaScript shows a networkState NETWORK_NO_SOURCE, which does not make sense to us...
Using an http URL as src and streaming the mp3 from the web works fine.
Has anybody managed to play local audio files with a wkWebView?
I also encountered this issue on iOS 9.2. A video with a local URL would play fine on the simulator but not on device. Debugging using Safari tools showed the video error to the the same No source error. We filed a radar for it: http://www.openradar.me/24281444
Here is the crazy part - one kludgy workaround that worked (without having to run a local web host) was that we found if you played a video first in a UIWebView then the wkwebview videos would work. We took this a step further and used a UIWebview that was hidden to play a half second video with no sound that had an autoplay attribute in the tag and the web view had
uiWebView.mediaPlaybackRequiresUserAction = false
While hacky as anything I have seen it causes the WKWebview to then play videos fine. So one more solution until they fix the issue.
It seems that code inside a WKWebView cannot access local files. I am not aware if this is intended behaviour or a bug (radar, anyone?)
Before loadFileURL:allowingReadAccessToURL: was introduced in iOS 9, there was a workaround to load a local HTML file by copying it to tmp/www.
Surprisingly, files there can then be access from inside the WKWebView – including media files.
Pretty easy fix actually you just need to prefix the src URL with localhost and your WKWebview port (default 12344).
Turn A into B:
<!-- A -->
<audio src="img/beep.mp3" controls></audio>
<!-- B -->
<audio src="http://localhost:12344/img/beep.mp3" controls></audio>
I've put up a bunch of audio downloads with SoundManager2 + PXLoader, but one of the audio files cannot be properly downloaded in Chrome. Last update, it was my 'Tempest III.mp3' file. Now Chrome is picking on 'Op 111 I.mp3'. Also, for whatever reason, it seems that once an audio file is stalled, a bunch of image files will be hit too, and stop downloading. I have to reload a few times to get the images in the cache so they will be loaded before the offending audio file. It works in Firefox and IE11. Why is Chrome doing this to my files?
The project is here:
http://www.newgrounds.com/projects/games/778014/preview
The audio appears as 'stalled' in the console. Thanks in advance!
ETA: It also works fine locally.
Edit: I tried reducing the number of audio files by one, and Chrome still failed to download one of the audio files.
I'm pretty new with Javascript but know it's capable of some amazing things. I recently got a Chromecast. Among other things it allows me to cast/stream any video or webpage to my TV when I click the Chromecast extension.
So, for example, I can load a video in my browser just by browsing to the file with the url like so: file://localhost/Users/username/Downloads/workaholics.s03e14.hdtv.x264-2hd.mp4. And when I click the Chromecast extension it plays on my TV.
I'd like to know if it's possible to create a playlist somehow for videos to be played this way. But I've read that, for security reasons, Javascript will not supply the path to a file, only the name. I was planning on letting a user browse through or drag and drop files to a playlist, and somehow play them back-to-back. I can't seem to figure out how to implement this. I was planning on getting the full paths to the videos added to the playlist and looping through them to play, but getting the full path is apparently not possible. If this is only run locally, with my local files, is there a workaround for something like this? Or anybody have other ideas?