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.
Related
I have a .webm video that I am dynamically setting as the source for the video tag.
vidPlayer = document.getElementById("player");
vidPlayer.src = videoPath;
The corresponding HTML:
<body>
<video id="player" class="video-player"></video>
</body>
This is working perfectly on the web browser but when I view this on my mobile, I get a white screen.
I checked the elements tab in the developer tools if different HTML was getting rendered, but it wasn't.
However, in the network tab for chrome web, there is a call made to fetch the video but the same does not happen for chrome android.
I am running this code on localhost.
Can anybody tell me what I am doing wrong or why this is happening?
So, apparently, if your video does not have controls enabled, then for mobile browsers, the user must interact(tap or swipe on the screen) for the video to be visible on the screen.
With controls enabled the video is visible from the start.
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.
In short, mobile browsers try to download a random file instead of loading video into the main player Website.
More info:
I've built a webseries type site on WordPress, that uses jQuery to load a video into the main player: http://suzellediy.com/
Recently, I made it responsive - and now, when testing on mobile, when clicking on the video thumbnail, the video does not want to load into the main player.
Instead of loading the video, mobile Chrome and Safari wants to download the file instead. The issue cannot be recreated by using firebug / chrome mobile emulator.
Any ideas what the issue could be?
Actually you may be able to reproduce the issue on the desktop when you disable Flash.
Try changing the URL in:
jQuery("#mainplayer").attr("src", "http://youtube.com/v/WKmUqV7abgw"+
"?&autoplay=1&loop=1&listType=user_uploads&list=suzellediy");
To this:
jQuery("#mainplayer").attr("src",
"https://www.youtube.com/embed/WKmUqV7abgw" +
"?autoplay=1&loop=1&listType=user_uploads&list=suzellediy");
Or this:
jQuery("#mainplayer").attr("src",
"https://www.youtube.com/embed/WKmUqV7abgw" +
"?autoplay=1&loop=1&listType=user_uploads&list=suzellediy&html5=1");
and see if that works.
Most likely what you see is that mobile browsers that don't support Flash try to download a file if they can't play it.
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 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