I need to stream a video in Safari for iPhone/iPad with the best possible quality.
I created 2 video files: one in low-quality for slow 3G speed, one in hi-quality for WiFi broadband streaming. I noticed that some apps (YouTube for example) are able to detect if the mobile device is running by 3G or WiFi, and so select a small sized video rather than an hi-quality video.
Now that is my DOM / Javascript code, the $v value is replaced by PHP and contains the video filename:
<video id="thevideo" src="streaming/video_<?=$v ?>.m4v" width="600" height="360" width="640" height="360" preload="preload" controls="controls" autoplay="autoplay">
flowplayer/video<?=$v ?>.m4v
</video>
<script type="text/javascript">
var myvideo = document.getElementById("thevideo");
myvideo.load();
myvideo.play();
</script>
Can I write something in Javascript / Webkit that is able to detect the connection mode?
Thanks to all.
You will have to load some sort of document to test your connection speed.
an example -- http://alexle.net/archives/257
I am assuming this will be in your own application:
You could use Apple's Reachability to determine the connection type in your application before sending the UIWebView's request. You can modify the request's URL by adding a query:
//determine the connection type via Reachability
myURLString = [myURLString stringByAppendingString:[NSString stringWithFormat:#"?conntype=%#", *connTypeString]];
//then send the request for the page.
Then, parse the URL query in PHP to determine the video URL that should be used.
If not, you would need to test the connection speed via a third-party Javascript or PHP script.
Example: http://jan.moesen.nu/code/php/speedtest/index.php?numKB=512
Related
I got 3 static videos on frontend, all of them takes approximately 21-22mb in size.
<video autoplay="true" src="videos/video1.webm"></video>
<video autoplay="true" src="videos/video2.webm"></video>
<video autoplay="true" src="videos/video3.webm"></video>
Their html autoplay attribute is set to true, so they need to be played immediately after the get request, or in my situation, after 3-4 seconds of a maximum delay. But the problem is, webpage starts playing them only after they fully downloaded.
How can i make a buffering for each of them?
It sounds like you want the video to progressively download - i.e. to start playing while the download continues.
This simplest way to do this is to ensure your server hosting the video supports range requests. If you were using mp4 files you would also need to make sure that the videos had the header data at the start, but this is not an issue for webm.
Once your server supports range requests then your browser video element should automatically request the video in chunks and start playing as soon as it has enough to start, assuming you set it to autoplay or hit the play button.
You can see more about Range Requests at the link below including the following easy check to see if your server support this:
curl -I https://yourVideoUrl
(https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests)
If you get a result that suggests Range Request are not supported it is quietly like a configuration issue on the server so speak to your server admin.
I have a Java application that can run as a regular java Swing application but creates a standard html5 report that opens in a webbrowser.
e.g
Browser Url is:
file:///C:/Users/Paul/AppData/Roaming/SongKong/Reports/FixSongsReport00574/FixSongsReport00574.html
As part of that it uses a audio tag to allow the song to be played in the browser
<h5>
<audio controls="controls">
<source src="file:/E:/Test4/test.WAV">
</audio>
</h5>
and that works fine.
But the application can also run with a Html User Interface, it then runs a webserver using Java Spark on port 4567, if I then serve the exact same report (yes i am actually serving files the same files on the disk) to the same computer so the audio file is local to the computer it will no longer play the song.
This would be the Browser Url
http://localhost:4567/FixSongsReport00574/FixSongsReport00574.html
So why is this, since I am specifying the full path in the source element and therefore I dont see why it would be affected by factors such as where static files are served from.
But in case relevant this is the java-spark start method
CustomJettyServerFactory customJettyServerFactory = new CustomJettyServerFactory();
EmbeddedServers.add(
EmbeddedServers.Identifiers.JETTY,
new EmbeddedJettyFactory(customJettyServerFactory));
staticFiles.externalLocation(Platform.getPlatformReportFolder().getPath());
staticFiles.location("");
staticFiles.expireTime(600);
SongKong.songKong.setRemote(true);
StartPage.recreateIndexPage();
init();
configureWebEndPoints();
configureApiWebEndPoints();
before((request, response) -> {
MainWindow.logger.severe(">>>>>"+request.uri());
});
listenForFinish();
The follow up question is that although I don't understand why it doesn't work on a local computer I can see that if was connecting via a remote browser then it would not work because the file url is relative to the server not the client machine, how would i make file playable in such a case.
You can't mix HTTP server and file protocols into one for security reasons. So what you need to do is below
While serving any html file read its contents and replace file:/ by something like /localfile?url=
And then you will need to create a /localfile endpoint in your embedded server code, which will read the url and then stream the file locally. Your server code will be able to access the local file and stream it.
There used to be few techniques back in the days of FF11, but they are not valid anymore
How do I view file:// images from http://localhost served pages in Firefox 11?
try this i hope it will help you
How to?
In order to make your web page plays music, the html code can be as simple as
<audio src="the location of the music url" controls> </audio>
example
<audio controls>
<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.mp3" type="audio/mpeg">
<source src="/assets_tutorials/media/Loreena_Mckennitt_Snow_56bit.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
I ran into this peculiar problem that I couldn't get HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplays just fine. My code looks like this:
<video id="frontpage-video" autoplay loop>
<source src="http://test-site:8084/video_mp4.mp4" type="video/mp4">
<source src="http://test-site:8084/video_webm.webm" type="video/webm">
</video>
If I change video source URLs to some publicly available URLs (for example to dropbox), loop works just fine. This is not a major problem since I think (hope) it will work once my site goes live and the video is publicly available.
My question is: Can I make the video loop if my video is not publicly available?
I couldn't find similar problems by googling. Could it be some kind of IIS setting that prevents videos to loop?
Update 1: The problem seems to occur only in Chrome. Firefox and IE works fine.
Update 2: It seems that the video will stop at the end but never returns true for element.ended
> document.getElementById('frontpage-video').duration;
< 16.12
> document.getElementById('frontpage-video').currentTime;
< 16.12
> document.getElementById('frontpage-video').ended;
< false
Update 3: Problem is either in IIS or in Telerik's Sitefinity CMS. Server should send a "206 Partial Content" status but instead it sends 200 OK. Has any Sitefinity users had this problem and know how to solve it?
It looks like your problem is that you're not using HTTP Byte Serving. Your server is sending a "200 OK" response, but it should be sending "206 Partial Content" along with these headers:
Accept-Ranges:bytes
Content-Range:bytes 0-1492370/1492371
The byte range request allows the browser to request only the portions of the file that it needs. So if you seek around, it can skip right to that point.
With the regular 200 response, you will usually at least find that you can't seek in the video. But, depending on how your video file is encoded and where in the file the metadata is placed, you may see more problems. Sometimes the file might not even play at all. WebM is usually more robust than MP4, which can be all over the place.
I don't know IIS well enough to tell you how to configure it, but try starting here:
http://blogs.visigo.com/chriscoulson/easy-handling-of-http-range-requests-in-asp-net/
Chrome/Opera can't loop the video if the video itself is not served with HTTP 206 Partial Content response but 200 OK instead.
The problem is that Sitefinity's storage providers do not support partial content (version 7.0). They are planning to implement this for the future.
At the moment the possible workaround is to use an external blob storage provider such as Azure, Amazon or ExternalFileSystem (ExternalFileSystemStorageProvider).
I got this information from Sitefinity's support team.
May be MIME type in IIS is not set up for MP4.
Open IIS, and locate you default page. You'll see MIME type in right pane.
Click Add and put field1=.mp4 and field2=video/mp4.
Restart IIS.
Hope this might work.
In your question, your video-element doesn't have the id frontpage-video (but i guess it's copy paste?)
check if the video end event is called in your webkit browsers, and if so, restart your video.
.
<script type='text/javascript'>
document.getElementById('frontpage-video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
//restart your video
}
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.
Im trying out the new and exciting features of chrome canary 19.
I can basically grab the video from the web-cam and set it to a source element for a video tag.
<!DOCTYPE html>
<html>
<head>
<title>Camera capture</title>
<script>
var localStream;
var localStreamObjUrl;
window.onload = function() {
navigator.webkitGetUserMedia("audio, video", gotStream);
}
function gotStream(stream) {
localStream = stream;
localStreamObjUrl = webkitURL.createObjectURL(localStream);
var video = document.getElementById("selfView");
video.src = localStreamObjUrl;
}
</script>
</head>
<body>
<video id="selfView" autoplay audio=muted></video>
</body>
</html>
From the example at https://apprtc.appspot.com, we can grab the video and stream it to a peer...
My question is, can I avoid doing all the traversal to get a p2p connection and directly upload the video to a server? Id like to be able to relay the video stream instead of sending it p2p.
You need some kind of streaming media server on the back.
The process would be:
capture the feed
send it to the server
transcode to various client formats
manage the outbound streams
There are numerous free and paid varieties available:
nodejs(demo/POC)
wowza(paid)
chrome based
More about transcoding: xuggler
The 'swiss army knife' of media: ffmpeg
and so on.
I have developed video recording solutions for the better part of the last 5 years and contributed a lot to fixing video recording bugs in Red5.
On the desktop you can use a Flash client + a media server (Red5, Wowza, Adobe Media Server) and on the mobile you can use HTML Media Capture.
I gave a detailed answer on a similar question at Record video on browser and upload to LAMP server
You can try nimbb, in which they have Flash-based and HTML5 capturing. After that, you can push the video to Brightcove to transcode it to various clients format.
They have API integration. The only issue is the cost.