I am embedding a html5 video. It works perfectly fine in chrome and firefox, however in safari, there seems to be this weird delay, where the video just hangs in there, and won't play until 1-2 minutes after. It however plays immediately, if I switch tabs. I am hosting my video on an Amazon S3, I set it to autoplay, muted and loop. I have tried using jquery to force play the video but it doesn't work. I have tried also changing the metadata to video/mp4 on aws control panel, also doesn't work. Also tried doing some window focusing, also doesn't work. Any tips would be appreciated. Here is the site http://xxvii27.github.io/web-oconnect/
Solved, by converting the .mp4 video to web optimized version using handbrake.
Related
Is there any library that sequences images and audio playback? I'm guessing that's the only way this could work..
Which picture formats would work best? I'm guessing that pictures wouldn't be as compressed as a video, but this example loads instantly for me:
Demo: Autoplay Inline Video iOS
Planning to just convert the video with ffmpeg. Any knowledge and advice would be great before I get started. Thanks
I believe that since iOS 6.1 you can no longer autoplay videos.
Referring to this stackoverflow post
"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.
In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it." - Apple documentation.
I'm using a latest flowplayer, and i'ved created couple of buttons that provides video source from cdn. With the click event the player should load the video source dynamically. But for some reason flowplayer cant unload and load the source of video properly. Instead I get the following error
html5: Video file not found
function flow(source) {
jQuery("#flow").flowplayer().unload();
jQuery("#flow").flowplayer().load(source);
}
alternatively I've tried to re-init the flowplayer with every click, but sometime the initial video get loaded instead of the clicked video source. After couple of clicks the flowplayer also get stuck on loading screen.
http://jsfiddle.net/qAj8x/
If you are using chrome for this purpose then from here . Chrome and Flow Player dose not go well together.
Native fullscreen is supported in Chrome 15+, Safari 5.1+ and Firefox 14+ and others will use full browser window. In Firefox 9+ the fullscreen is disabled and needs to be manually enabled at about:config (full-screen-api.enabled;true).
Some Chrome versions have issues with playing MP4 content. Workaround: List a WEBM before the MP4 source and/or set preload="none" as video tag attribute.
Chrome gets stuck when trying to load the same video twice, even in two different tabs.
I'm using mediaelement.js to load videos with subtitle tracks.
All was working well until I updated my Chrome browser to 27.x. Now if a subtitle track is included, the video will load but not play. The video buffers fine (I can manually scrub through it), but neither the play button or javascript play() will play the video. The loading gif just sits there, and I don't see any errors in the console.
It works in all other browsers I've tested, including Chrome 26.x.
If I remove the subtitle source element, the videos load and play correctly in Chrome.
(This is my first SO question so any tips would be appreciated, thanks)
I'm on day four of trying to solve this same issue and came across this question. It's happening on Mac and Windows. Troubleshooting is aggravated by what appears to be local caching -- if I comment out the <track> the video plays; When I re-enable it and reload, it also plays, but then if I close out of the browser it will no longer work until I comment the <track> out again.
If I disable mediaelement and test with native HTML5 video, the problem does not manifest itself.
I have a bit of jquery acting on an html5/video.js video tag:
$("#video").one("ended", function() {
various animations on page;
}
The animations run in Chrome, but not FF. Other javascript works, and .bind/.on do the same thing. The video plays fine. Firebug doesn't notice any errors. It should be noted that Firefox can't play the mov/mp4 files, so it falls back to the ogg I specified. No looping, autoplay is on.
Anyone? Thank you bunch's.
When video.js fell back to ogg video for Firefox, it wrapped the video in a different div (but not in chrome). Just selected it and it worked.
I am trying to open m.youtube.com using an ordinary browser but to be able to play the videos using HTML5 (instead of the default RTSP playback). To do that, I spoofed User-Agent in Firefox, and added there a string corresponding to iPhone's Safari UserAgent string. After I've done that, I see a nice "iPhone-like" version of the Youtube (instead of an ordinary m.youtube.com for other mobile devices). But the video, when selected, is not being played (on a "User-Agent-spoofed" Safari i can hear only sound, on "spoofed" Firefox the video is hung with a spinning "video is loading" icon). Why that might happen? what kind of features of Safari for iOS HTML5 version of youtube site may use that the video is not played in desktop Safari and Mozilla?
I have checked the Desktop browser requests and responses with Wiresharked, and found the GET request which corresponds to the video asked (the request's Content-type is video/mp4). But the playback works always only on the iPhone's Safari.
What may be the reason? I tried to look into HTML5 code of the Youtube page that contains video player, but there's so much JavaScript (most of HTML is being generated dynamically) that I got lost in it.
Is there any way to make it work on ordinary browsers (I can modify the requests/cookies on-the-fly)? I'd like to have an iPhone-styled youtube with HTML5 on my desktop browser.
Thank you