Unable to use HTML 5 video timeline to scrub along video - html

I am unable to load a HTML video element (from AWS S3) in webm format and use the timeline to scrub along it. The timeline works once the whole video has played once.
Is there a way of being able to use it from the start?
I can't tell if it is a problem server or client side.
Below is an example of the video and how it looks throughout the first play.

Related

Load only the next 10min of HTML video when it is playing - not the entire video

I have videos on my website with duration of almost 2h (=> large file size).
I have managed to convert them to h265 to reduce server load. To further reduce server load I also want the video to only load e.g. the next 10min from the point the user currently is at in the video (and not the entire video). Youtube is doing it this way.
The HTML preload attribute does not have this option. Is there such a feature in ffmpeg (or anywhere else)?
Thanks for a hint
You need to work with "Dynamic Adaptive Streaming over HTTP". It could be implemented via javascript.
I suggest looking into Dash.js github page

Play video files online sequentially without delay/buffering between videos

Is it possible to play video online that's made of two or more video files?
Since my original post wasn't clear enough, here's expanded explanation and question.
My site is hosted on Linux/Apache/PHP server. I have video files in FLV/F4V format. I can also convert them to other available formats if necessary. All videos have same aspect ratio and other parameters.
What I want is to build (or use if exist) online video player that plays video composed of multiple video files concatenated together in real-time, i.e. when user clicks to see a video.
For example, visitor comes to my site and sees video titled "Welcome" available to play. When he/she clicks to play that video, I take video files "Opening.f4v", "Welcome.f4v" and "Ending.f4v" and join/merge/concatenate them one after another to create one continuous video on the fly.
Resulting video looks like one video, with no visual clues, lags or even smallest observable delay between video parts. Basically what is done is some form of on-the-fly editing or pre-editing, and user sees the result. This resulting video is not saved on the server, it's just composed and played that way real-time.
Also, if possible, user shouldn't be made to wait for this merging to be over before he/she sees resulting video, but to be able to get first part of the video playing immediately, while merging is done simultaneously.
Is this possible with flash/actionscript, ffmpeg, html5 or some other online technology? I don't need explanation how it's possible, just a nod that it's possible and some links to further investigate.
Also, if one option is to use flash, what are alternatives for making this work when site is visited from iphone/ipad?
An approach that will work on some browsers currently, and on most browsers going forwards is to use the HTML5 Video Media Source Extension mechanism.
This essentially allows you replace a static 'src' file for a video in your HTML5 page, with a dynamic src buffer which you can then fill any way you want using your own Javascript code.
So you can write code to pre-buffer the second video when you get towards the end of the first video and then immediately start adding packets from the second video to the src right after the last packet for the first video.
In very high level terms this looks like:
Your HTML to insert the video where you want it in your page:
.
.
.
<div>
<video id="yourVideo1" controls="" autoplay="" width="320" height="240"></video>
</div>
.
.
.
Your Javascript to provide the source for your video:
//Get the video element
var videoElement = document.getElementById('yourVideo1');
//Create a 'MediaSource' and associate it with this video
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
//Add a listener to the MediaSource object to check for
//the video been opened. In this function you can add your
//code to get the get your videos from the servers and add
//'chunks' to the media source buffer
mediaSource.addEventListener('sourceopen', function(e) {
//Set the format of the source video
var mediaSourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
//Get your video from the web
while (not the end of your video playlist) {
...
//Stream video from server
...
//Add packets received to the media source bufer
mediaSourceBuffer.appendBuffer(receivedVideoPackets);
//If near end of video start fetching next video to
//avoid buffering delay
...
//If end of video go to next video in playlist
...
}
}, false);
Look at the HTML5 Rocks demo below to see this in action (for a slightly different usecase).
Given how tricky video manipulation is and the multitude of formats etc, it would be much easier for you if one of the established video players provided the functionality out of the box so I would still try their forums as mentioned in the comment, but at least you know it is technically possible.
The MSE spec is available here:
http://w3c.github.io/media-source/
And a good intro blog and demo is here (make sure your browser supports MSE - latest version of Chrome does):
http://updates.html5rocks.com/2011/11/Stream-video-using-the-MediaSource-API
You can find latest browser support here:
http://www.jwplayer.com/html5/mediasource/
Use two video elements, first visible and second display:none for buffering.
After first video playing, check currentPosition and currentDuration,
specify second video preloader prepare visible video player's buffer data.
First video element's SRC could be specified anytime for seamless playing.

Embed code html to play rtmp stream with additional attributes?

does any one know the way to play, rtmp stream with attributes embded on a website?
Also if i have:
rtmp://$OPT:rtmp-raw=rtmp://xx.xx.xx.xx/live?idp=4050/rer_835660 playpath=rofl swfUrl=http://www.somewww.com/tv/swf/player.swf?file=redtofile&autostart=true&/2/3 live=1 pageUrl=http://www.somewww.com/tv/get_file.php
the real rtmp link is:
rtmp://xx.xx.xx.xx/live?idp=4050/rer_835660/rofl
some of rtmp will play if there is no token for swf player protection. That is why i need swfUrl and pageUrl added and sometimes Decrypt option.
Is it even possible? I know that vlc have some issues with playing such as url's.
//edit:
I know that my link does play in SimpleTV but i have to get it every time it changes. I have written php script so it fetches actual link for me as soon as I open my webpage. So i know its correct.
Just need to find way to play it, with anything, except SimpleTV.
Preferably Embed code for website, normal rtmp links i play via vlc plugin, but it does not support such as long rtmp links, example shown above. I might be wrong? That might be me could phase or construct correctly rtmp link.

Add/remove playlist items in JW Player (using MySQ/RTMP)

Ok, we have a server with hundreds of videos (from a local tv station) and we are making a small website for the videos to be shown using RTMP and a MySQL database. All the video names are stored in the database and we use PHP to show the names in a list and make them clickable (onClick to add the video to player). I have got this working but now we would like to add a small pre-roll before every video. It's a small clip showing our logo for a few seconds.
Let's say I have a playlist like this:
Pre-roll video
Main video
Then I want to click a link (which is generated from my MySQL database) to change the second video to some other video:
Pre-roll video (same as before)
Main video (new)
And then load the playlist and play it from the beginning.
All this using RTMP.
Is this possible?
I got it working using a PHP variable as the second video.

Play video chunks in googletv with chrome

I am currently working on a web application for video processing. Here is the situation:
I have a mp4 h264 video as input, I split the video in multiple avi files. Each avi file is processed individually generating another avi file as an output which is immediately encoded back to h264 and is now ready to be displayed in my web application.
The problem is that in need to play those video chunks as if they were a single video but I have not been able to accomplish that in a proper way. I have tried the following solutions without having the expected results:
JW Player: Each time a chunk is played, the player goes black and as far as I know it is not plausible to pause it on the last frame
Flowplayer: Videos wont reproduce on googletv's chrome browser
HTML5 video tag: Behaves extrangely on googletv's chrome browser not playing the chunks completely when the src attribute changes and no playing at all less-than-1-second-chunks (It works fine on linux)
Any Ideas?