The system I am working on is set up like this:
Files (in DB) <-> ContentServer <-> Webpage
Say I have a link to a video, and someone clicks that link, the contentserver finds the requested file, generates a Guid to represent that file, and then builds a page which uses the Guid for the "file". This Guid does not have a file extension (naturally).
When using VideoJS in IE and Firefox, this appears to work just fine. However in Chrome it's not working at all. The video doesn't appear to even be loading, much less loading and playing. Below is an example of how I have it set up. Anyone have any ideas how I could make this work on Chrome?
<html>
<head>
<link href="/Video/video-js.css" rel="stylesheet" type="text/css">
<script src="/Video/video.js"></script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
<source type="video/mp4" src="/content/7cb55f87-b240-45e0-9890-ec383fd019c9"/>
</video>
</body>
</html>
It appears the problem lies in Apple products and Google Chrome not playing nicely with ASP.Net. Chrome and Apple products first send a request for the first two bytes of content. If they don't receive these two bytes - they fail. ASP.Net does not have the capabilities to handle byte-range requests, regardless of whether or not the server it is on can. So, if you are using ASP.Net and you intend on using video, you should account for the fact that you will have to roll your own byte range request handler, or use one of a very few third party extensions that are out there.
Related
Suppose I want to develop a web site with a lot of videos, since there will be a lot of videos I will need a lot of space in the server-side, how can I store a large number of videos for the website?
I mean, for playing a video I need to write in the HTML tag a relative path, like: ~/MySite/Videos/video1.mp4, but since I will have a lot of videos I thought to put all videos on external USB's with a lot of space.
how can I tell the HTML to navigate to the USB drive, how to approach this issue?
"...Let's say I want to read videos from multiple usb's then I have a problem."
You can try the file protocol (for local machine files, instead of online loading via https protocol).
The format is: file:///X:// (where drive X is your own preferred).
Example: This html could be on drive G: and yet be loading a video file from drive E:
<!DOCTYPE html>
<html>
<body>
<video width="800" controls>
<source src="file:///E://VC1_files/trailer_Watchmen_HBO_01.mp4" type="video/mp4">
</video>
</body>
</html>
I am creating a html page that will be distributed and run locally. It has a video which is supposed to play on the page. When I run the page though, I receive an error saying Internet Explorer restricted this webpage from running scripts or ActiveX controls.
This will happen to the end users also. What can I do to allow the video to play right away so the warning box does not have to be allowed.
The current code I am using is:
<!DOCTYPE html>
<!-- saved from url=(0024)http://www.abc-defg.com/ -->
<html>
<body>
<div style="text-align:center">
<video id="video1" width="715" autoplay="autoplay">
<source src="images\abc Movie.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
I have the abc-defg is the same length as the company name
According to this MSDN discussion, the answer is no. This is an artifact of loading locally. You'll be fine when you put this on a live web environment. Objects loaded locally are treated differently,from a security standpoint, than hosted objects, so you can expect a completely different scenario when you have this video hosted on a remote web host.
I just noticed that Chrome (Version 45.0.2454.99 m) basically reloads a video each time it loops. This occurs with even the most narrowed down version of my code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<video autoplay="autoplay" loop="loop">
<source src="myvideo.mp4" type="video/mp4" >
</video>
</body>
</html>
This occurs independently of the hosting technique (tried local, Google drive and 2 classic hosting solutions) AND is not related to cache-control HTTP headers, those only ensuring the video isn't reloaded from the source each time but from the client-cache.
As it seems to be a Chrome bug and I can make this not too visible for the user I could live with that, but still, on airbnb website, they have a header video looping and NOT being reloaded by Chrome. I tried mimicking their HTML which isn't much more complicated than the example above, video gets reloaded on each loop, so I know for sure there must be some kind of workaround for this implemented on their site. Their JS code is minified though, therefore very hard to debug and I don't have even the beginning of a clue on how they do it. So my question would be: has everybody encountered this issue and found a workaround he could share with us ?
This could be caused by having "disabled Cache" ticked in the Chrome Developer Tab.
If not, you can use the App Cache to fix or service worker to load the video from Cache.
This issue was covered here:
Why html5 video loop create request each iteration
Probably fixed in newer version of Chrome
I'm preparing to update some old pages to HTML5, and was surprised to see that it worked in Chrome, but not the latest Firefox (v.33.1... also tried v.32). What is odd is this... In Firefox it actually WILL play IF you "coax it". If you move the video position slider to someplace beyond the start (about 5 seconds in) and THEN click play, all is well. Further inspection showed that when I click play, the file pointer was jumping to the end of the file leaving my "poster" photo intact, leading the viewer to think there is nothing else they can do. If, however, you manually move the pointer back to anyplace beyond the first couple of seconds of the file (really!), and THEN click the PLAY button, FF will play the rest of the video fine.
Sometimes i think that to the more technically minded among us, the universe doles out the weirder problems, while God laughs.
I'd suspect video file corruption, but all my conversions were made with the very reliable ffmpeg utility, and tested with VLC. Again, it works fine from Chrome, which supposedly uses the same video format. Here's a link...
FF will play the older type ogv files, so if this is one of those things where FF, now at version 33 is at fault, I'll have to detect the browser and write the order myself with a document.write(). But it would be nice to know if there is a more straigh forward solution.
Note that I have tried adding the mime types to my HTACESS file. But the fact that the behavior is the same when point my browsers directly the file on my local machine, makles me doubt that is the problem.
http://pixyland.org/peterpan/OurWedding2a.html
And here is the page code
<!DOCTYPE html >
<html>
<head>
<title>Our Fairy Wonderful Wedding Day... The Arrival!!
</title>
<link rel="shortcut icon" href="/pixyland.ico" >
</head>
<body marginwidth="10" leftmargin="10" rightmargin="10" bgcolor="#33cc99" link="#333399" >
<table align="center" border="1"><tr><td align="center">
<div id='vtLocation' align="center">
<video width="640" height ="480" controls poster="Imagezz/Wedding/arIMG_2280.JPG">
<source src ="../vids/Arrival.mp4" type="video/mp4"> <!--cSafari / iOS -->
<source src ="../vids/Arrival.webm" type="video/webm"> <!-- Firefox / Opera / Chrome -->
<source src ="../vids/Arrival.ogv" type="video/ogg" > <!-- older Firefox / Opera / Chrome -->
<!-- download as last resort -->
<p>If you are unable to view the video, here are some links to download <br>
in a a few well supported video formats. You may be able to just download <br>
and play one of these files without the browser.<br><br>
<strong>Download Video:</strong>nbsp;
nbsp;"MP4"
nbsp;"WEBM"
nbsp;"Ogg"
</p>
</video>
</div>
</table>
</body>
</html>
Found this suggestion that may be worth trying
fmpeg -i input.webm -codec copy -avoid_negative_ts 1 output.webm
https://stackoverflow.com/a/19639848/1686036
It seemed to help me, although it could be something else "unusual" with FF
I recently realized that some mp3 files causes the "seeker" slider of an HTML5 audio control to fail on Firefox and Explorer.
Specifically, I can move the slider to the desired position, but the sound jumps to an incorrect time. Therefore, when the slider comes to the end, the song is already playing, and the current time keeps incrementing.
In addition, the track length (it's supposed to be a fixed value, loaded from the metadata) has a strange behavior given that point: it starts incrementing as the current time...
I found no differences between the files that work correctly and the files that don't (Not even in the codecs), but I suspect is a browser support related issue, since I didn't experience that problem using Chrome.
Just in case, you can download the file here:
http://www.4shared.com/mp3/JzSPjx3Qba/Quartet_12_Mov_1.html
And this is the test code I'm using:
<html>
<head>
<title>Test Page</title>
</head>
<body>
<audio controls="controls" id="player">
<source src="Beethoven - String Quartets/Quartet 12 Mov 1.mp3">
</audio>
</body>
</html>
Thanks!