Where should I host a video to be able to control playback rate from 25% speed all the way up to 1,000% speed (10x faster)?
Controlling playback speed is easy with HTML5 <video>. However I can't find a video host to support the speed range I need.
Options I've considered:
Self-hosting
One option is to host the video on my own servers. From what I've read this comes with a lot of complications, and it's preferred to host on existing services (Youtube, Vimeo, Brightcove, etc).
Youtube
I looked through the YouTube video API, but it only has a certain range of playback rates that doesn't sound like it gets up to 1,000% speed. Although I own the videos, so maybe I have control over available playback rates them when I upload?
Vimeo
No playback rate controls.
Brightcove
API has a function for setting playback rate. But also requires paying...
You may be able to make use of MediaElement.js particularly with this example here. It is possible that YouTube simply won't serve the content fast enough to run at 1,000% speed, however.
If that is the case, I do think that rolling on your own solution with the <video> element is easiest here, making use of any CDN service to serve your content. The caveat here is that you are restricted by browser support, though almost all modern browsers will support the <video> tag.
It doesn't look like this is possible unless you use the HTML <video> element in a custom implementation. Even the Youtube API states:
Even though the AS3 player supports playback rate controls, variable speeds are currently only supported in the HTML5 player.
At present (May 2015), your best bet is to create your own solution, since youtube seems use flash even on some browsers that support html5 videos, like my Opera 29 (though if I change my user-agent to chrome, it does serve the html5 player...). Most browsers can handle mp4, and you could encode the video at different playback speeds as a fallback if the <video> element isn't supported. At this point <video> support is approaching 95% in the US, so a fallback may not be necessary depending on your audience.
Another point in favor of using your own solution is that youtube seems to only support playback up to 2x speed (200%).
The biggest problem with hosting your own video that isn't solved by the <video> element as far as I've seen is the load on the server. Using a CDN would probably solve this problem. Please note that my laptop can't play smooth hd video (well, DVD quality, I don't have a lot of videos to test with) served from my own machine at more than 2x, so unless you're using very small videos you might find 10x impractical.
HTML5 Rocks has a good overview of setting up the <video> element.
You can host the media files on AWS S3 (either on AWS itself or compatible services such as Dreamhost). S3 solves some of the FTP issues with self-hosting of media files such as uploading large files, versioning, etc., and it might be a reasonable compromise when complete media-player control is a must.
If the above solution is not feasible then you can:
Transcode the media upfront in several most-relevant speeds. Changing the playback speed will mean switching to a different movie.
Provide the option to download the files or relevant chunks so the user will use a local player (e.g. VLC) to "play" with the media.
Can be done with Vimeo, the Pro version anyway.
I go to the hosted video, Video File and Access your video files.
There are links there to video files that can be use as the source for the HTML5 video.
<video id="video" src="http://player.vimeo.com/external/1278xxx.hd.mp4?s=xxx&profile_id=119">
After that it's using jQuery to get a handle on the video
var video = $("video")[0];
And changing playback rate is
video.playbackRate = 0.25;
Might run into some security issues as anyone with the link can now download the file with a Right Click and Save As.
Related
I hope you are doing well!
I am working on an eLearning website and came across the topic of the video loading. Since videos are of various sizes, it would be impossible to make the user wait for the entire download of the video for them to start watching, so it must be taken as a stream where the video keeps loading content as the user watches (similar to YouTube I guess). However, I am failing to find how this works? I've been recommended the use of SCORM and xAPI to help with this but I am only finding help on how to upload SCORM files or how to write xAPI code and not how to set them up in our website.
How can we make our videos download as the User watches? Are SCORM and xAPI actually what we should be looking for?
For context, we will be using React JS for our Frontend and will be saving the videos on a server.
I would greatly appreciate any advice you have and thank you for your time!
We tried using xAPI and SCORM however we aren't understanding how they might help
SCORM and xAPI by themselves are not going to assist you with this in general. To stream video via an eLearning course you will need to use a video player (such as the HTML5 video player or video.js) that understands streaming video protocols and to encode the video files in a format supported by that player. I would suggest reading about HLS for instance, though I didn't read the entire page, this is a good place to start: https://www.dacast.com/blog/hls-streaming-protocol/
A traditional eLearning course, such as you would have with SCORM, is going to provide a reasonable way to wrap the playing of video such that it can be launched for a learner via an LMS and may capture data such as completion. xAPI is probably suggested because it provides a more robust way of enabling the capture of interaction data such as when the learner plays, pauses, or seeks in a video. My preferred approach for doing this is to leverage cmi5, and there is an example of xAPI video profile usage within a cmi5 course in the Project CATAPULT sample content, see https://github.com/adlnet/CATAPULT/tree/main/course_examples. It could be adapted to leverage something like HLS and get streaming capability. Confirm with your LMS of choice ahead of time whether it supports cmi5 as adoption is still lower than for SCORM.
SCORM Cloud (a bit of a misnomer, https://cloud.scorm.com/) provides builtin video handling via the cmi5 mechanism and will soon support video streaming beyond just from YouTube without the need to author a course separately.
Youtube has an option to change the playback speed of videos that speeds up or slows down a video's audio without affecting its pitch. I know that there are a number of different algorithms that can do this, but I am curious as to which specific algorithm Youtube uses because it seems to work rather well.
Also, are there any open source libraries implementing this algorithm?
I found this article on the subject dating back to 2017, I presume it's still valid or should give you some pointers: https://www.googblogs.com/variable-speed-playback-on-mobile/
It reads, in part:
"On Android, we used the Sonic library for our audio manipulation in ExoPlayer. Sonic uses PICOLA, a time domain based algorithm. On iOS, AVplayer has a built in playback rate feature with configurable time stretching."
Problem:
To get an iOS app that streams video accepted into the app store, we need to have a HLS version.
What’s the problem?
Android does not support HLS well, and for other reasons, we need to store MP4 and HLS files of the same content.
What’s the difference between MP4 and HLS and why do you need to store both?
MP4 is a container that stores H.264 video and AAC audio for best compatibility in HTML 5 browsers – jsvideo players often have flash fallback if the browser does not support MP4 video in HTML 5 that use the same MP4 file, but played through flash.
HLS is a protocol where text files (.m3u8) contain references to playlists, which themselves reference .ts files (or m2ts), which are mpeg-2 transport streams, not to be confused with mpeg-2 video. The .ts files are containers for the same H.264 video and AAC audio.
Why am I complaining?
It takes time to create the HLS files and playlists from the MP4 files
(Most importantly) We are now storing twice as much data on S3
Why should I care? If your S3 bill is $10K per month for storing both MP4 and HLS, now it is only $5K. Or put another way, if you are paying $100K for storing data in MP4, it would cost $200K to store the same content in both MP4 and HLS.
What do I want?
I want to store only the .ts files and serve both desktop users, iOS users, and Android users with that single file.
Is it possible?
Doesn’t HLS require 5-10 second .ts segments instead of one big file?
As of IETF draft 7, and version 4 of the protocol, HLS supports the tag EXT-X-BYTERANGE which allows you to specify a media segment as a byte range (subrange) of a larger URL.
Are .ts files compatible with HTML5 video?
Apparently not. They are a different container than MP4, yet contain the same video and audio content. Worth looking into how to store the raw video/audio data once and simply using the correct containers when necessary. If JS video players can convert HTML 5 MP4 files into Flash video on the fly if the browser does not support HTML 5 MP4, then why not be able to do the same with M2TS data?
I might be ignorant on some level, but maybe someone can shed some light on this issue, and possibly present a solution.
There currently is no good solution.
A little background.
Video streaming used to require custom protocols such as RTP/RTMP/RTSP etc. These protocols work fine except, we were basically building two separate networks. One HTTP based for standard web traffic, and the other one. The idea came along to split video into little chunks and serve them to the player over HTTP. This way we do not need special servers/software and we could take advantage of the giant HTTP CDNs that were being built. In addition. because the video was split into chunks, we can can encode the same video into different qualities/file sizes. Then the player can choose the best quality video for its current bandwidth. This was the perfect solution for mobile because of the constant changing network conditions. Several competing standard were developed. Move networks was the first to market [citation needed]. The design was copied by Microsoft (Smooth Streaming) and Apple (HTTP Live streaming aka HLS). Microsoft is phasing out smooth streaming in favor of DASH. DASH looks like it will become the default streaming solution of the future. Except, because of its design-by-comity approach, it has basically been stuck in comity for a few years. Now, in those few years, Apple sold Millions of IOS devices. So HLS can not just be discontinued. Why doesn't everyone just use HLS then? I can think of three reasons 1) Its Apples standard, and people are haters. 2) Transport streams are a complicate file format. and 3) Transport streams a patent encumbered. MP4 is not patent encumbered but it also does not have the adaptive abilities. This make user experience poor on 2G networks. The only network supported by the iPhone 1. Also AT&T at the time did not want full bitrate video streamed over there woefully inadequate celular network. HLS was the compromise. All of this predates HTML5. So the video tag was not even considered in its design.
Addressing your points:
1) It takes time to create the HLS files and playlists from the MP4
files
This is a programing website, Automate it.
2) We are now storing twice as much data on S3
[sic] I want to store only the .ts files and serve both desktop users,
iOS users, and Android users with that single file.
You and me both man :).
Possible solutions.
1) What is specifically wrong with Androids implementation? (except for lack of in older devices)
2) JW player can play HLS (Not sure about on android)
3) Server side transmux on demand.
Doesn’t HLS require 5-10 second .ts segments instead of one big file?
You can do byte-ranges, but you need to make sure all devices you are interested in support it.
If JS video players can convert HTML 5 MP4 files into Flash video on
the fly if the browser does not support HTML 5 MP4, then why not be
able to do the same with M2TS data?
They don't convert. Flash natively supports mp4. It is possible to convert TS in AS3/JS. I have done it. JW player can convert TS in browser. video.js may be able to as well.
Been having trouble with YouTube lately with regards to autoplay, looping and playlists. Currently using the AS3 embedded player and it was working fine until recently when autoplay and playlist options became mutually exclusive. I am also finding the loop option doesn't work with autoplay.
So, looking at options other than YouTube as we will have access to the video anyway and can either upload or stream using whatever technology is appropriate. My application is for touchscreen interactive kiosks which will be largely unattended and I want to be able to run embedded video with all controls turned off to prevent anyone from jumping off to some other website at any point. This is crucial! I don't mind if a touch can pause the video like it does with YouTube but links must not be available to jump out.
My web app is written in Rails 3 with HTML, CSS3 and JQuery where required. It runs on IE8/9 on the kiosks and Safari mainly during development. I'm using Heroku.com for hosting.
Hopefully I've given enough background here to attract some good answers but please let me know if I've missed anything important.
Thanks for your time,
Craig.
This service is awesome in quality and price.
http://sublimevideo.net/
If you are using heroku for your hosting, you should take advantage of their add-on. The interface is super clean and you have full flexibility to mold playlists or behavior.
Panda Stream
http://addons.heroku.com/pandastream
I'm putting together a site that will include some instructional videos that will be 1 to 3 minutes long. The users will be accessing these through standard and mobile browsers. I'm particularly concerned with users of i-devices, such as iPhone/iPod Touch/iPad.
To deliver the videos, I'm will probably use videojs.com player - it seems like a pretty robust choice. Unfortunately, I don't know first thing about what file formats and standards to use for encoding files. H.264 Baseline profile seems to be a good choice, but I really need some direction on where to read up on what might be the best choice.
Please help :)
The best resource I've found for this information is Dive Into HTML 5. They have a very concise breakdown of which formats will work with each of the browsers.
The long and short of it, however, is that h264 baseline is the way to go, especially if your HTML5 video player has Flash failover.
While HTML5 video is currently the standard in the mobile space, a back of the envelope calculation reveals that only about 40% of desktop browsers users can view it as compared to Flash's 99%+ market penetration. Moreover, you'd have to encode and store your videos twice (h264 and Theora) in order to reach all HTML5 video capable browsers.
However, by using h264 video and a Flash failover, you can cover all iDevices plus all browser that either don't support HTML5 video, or support HTML5 video for a format other than h264.
One word of warning: iDevices only support the h264 baseline up to level 3.0, so make sure to stay within these specs.
Hopefully that helps.