After few days of debugging various loading issues with one website we've been working on we came to conclusion that there's an issue with streaming video files (mp4, ogv and webm format) under IIS7/IIS7.5 and Windows Server 2008.
We have two versions of website, one is running on PHP (custom made CMS solution) and the other one is running on Umbraco.
When nginx is serving video content, no video chopping is experienced.
Any ideas what could be an issue?
To play the video, we're using HTML5 tag:
<video autoplay="autoplay" class="largeVideo" loop="loop" muted>
<source src="/media/1123/ai-intro-video.mp4" type="video/mp4">
<source src="/media/1124/ai-intro-video.ogv" type="video/ogg">
<source src="/media/1126/ai-intro-video.webm" type="video/webm">
</video>
I can't provide website URL, but you can check out Umbraco's website - this video is delivered in pretty much the same way (even design-wise it's looking similar).
Mime-types are added correctly, disabling compression didn't change anything.
Video is choppy even if played by directly targeting video URL.
We've tested website on few servers and from different locations, and results are pretty much the same.
A couple of things to consider:
I tried Umbraco on my firefox 28 Windows 8.1 and it looked ok. On Chrome 34 I have noticed some stuttering but only some.
Have you not some specific hooks for your application that may involve IIS but not Nginx?
If you do not use pure streaming for delivery to HTML5 video (like DASH or HLS) content is progressively downloaded to the browser cache for playback. So in "theory" playback should not relate to your server being X or Y once file is properly downloaded.
However if your page uses much CPU for other JS or else tasks you may experience stuttering at playback when frames are decoded to be displayed (especially if you target HD content). Is your video choppy when you only have one HTML5 video tag on a blank page - having preload attribute set to auto and autoplay disabled?
I have had a similar issue with one of my Apache server and Internet explorer. I would suggest you tried the following steps:
wild card CORS (msdn suggested that)
check your web sever supports ranges request/206 partial content. I have used CURL to check this on my server.
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
I'm working on an Electronjs app that needs to play very large videos stored in the user's machine. I've tried both with the vanilla html5 video tag and with other players. Small videos load and play fine, but large ones (1GB and up) only play sound, not images.
<video controls width="1280" height="720">
<source src="F:\sample.MP4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
This happens both within the Electron app (Chromium based) and Chrome itself. Edge, on the other hand, plays large videos correctly.
I could not find any documentation on why this could happen, or if Chrome is behind in some video compatibilies...
Where could I look for a solution?
Thanks
Edit: The problem was not the size of the videos, but their codec, h264 played well, hevc (h265) didn't
#snwflk found the answer in the comments. It's because the hevc codec is not supported in Chrome: https://caniuse.com/#feat=hevc
Edge apparently supports it by offloading the video decoding to the hardware: H.265/HEVC web browser support
Maybe Electron can be compiled in a way that Chromium supports it? https://stackoverflow.com/a/39319614/3362074
I am currently making a static site that makes use of a .mp4 video. I am using Middleman and hosting with Heroku (free plan). On my local server everything works wonderfully, but in the deployed Heroku version the video appears as a black box. In Safari and Firefox there is no container at all. All my other assets seem to be loading nicely. The video is 5.9 mb. Any idea what is going on here? Thank you in advance!!
<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video>
In theory, if you do not specify a 'poster' image to display before the video starts, the browser should display the first frame of the video:
http://www.w3schools.com/tags/att_video_poster.asp
In practice browsers seem to implement this inconsistently, and I have seen some mobile devices cases where certain videos display the first frame and others a black box, even for the same video types.
To avoid the issue you can specify your own image to be displayed using the mechanism mentioned in the link above - this should work consistently across browsers. The HTML will look something like:
<video class="vid-home" controls poster="yourImage.png" autoplay loop muted>
<source src="/videos/home.mp4" type="video/mp4">
Your browser does not support the video tag or format.
</video>
I have the following HTML5 video element in my test page:
<video width="1280" height="720" loop="loop">
<source src="http://d1dsyb3mv0b0i6.cloudfront.net/test/lines.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>
I want it to loop its playback, so I set the loop="loop" (and I also tried simply loop), but for some reason Chrome 23 does not restart the video when it ends. I specifically moved the video to a Cloudfront Download distribution to get the partial content request support on the server, which is supposedly needed for Chrome to perform looped playback, but unfortunately that does not seem to make a difference. Note that in Safari all works fine. Then again, Safari has no trouble looping even a local video file, so it does not need a server with partial content request support.
It seems to be Cloudfront-related, since this movie does loop correctly: http://media.w3.org/2010/05/sintel/trailer.mp4.
Anyone any ideas?
You need to properly set the content-type metadata on the S3 object to reflect the correct MIME type of the file. Chrome tends to be more picky about this than other browsers.
I have uploaded trailer.mp4 to Cloudfront (S3) as well and that does work. This mp4 even works from the local file system, so unlike what I thought, I don't specifically need to play the video from a server that supports partial content requests. So it seems that the lines.mp4 video is somehow different from the trailer.mp4 video. I'm very curious to find what the difference is that makes this video not loopable by Chrome, whereas it loops fine in Safari...
Loop worked for me, but try replacing loop with the commands:
autoplay onended="this.currentTime=0"
or
autoplay onended="this.load()"
The second option results in flicker during the reload. The first ran smoothly, but currentTime can behave differently, depending on other settings. Hope that works.
How to play video file in webrowser without installing any player software in the remote computer? I think this is on fly video playing concept and lots of sites using this
I'm using VLC media player to play video on the browser. Is there any way so that I can play video on the remote browser without installing any software.
Maybe I can tell them to install plugins for that?
there is any way so i can play video on the remote browser without installing any software
Nope, there isn't. You will always need video playing capability on the client side. (Well, short of turning the videos into Animated GIFs, but that is madness.)
The best supported Video embedding methods are Flash Video and HTML 5 Video. See this SO question for detailed information on the two.
use this code in any control to play video
<video controls="controls" id="id1" width="200" height="200">
<source src="movie/show.mp4" />
</video>