Chromecast not playing multiple HTML5 videos - html

I have 2 video players on single page. On desktop, everything works fine, both video players are playing videos. But when I try to cast this page to Chromecast (via Google Chrome extension or via https://demille.github.io/url-cast-receiver/), only first video player is active and playing, second video player is not working.
I tried to debug it and it looks like second video ends at video readyState=1 (first video has readyState=4)
Is there way to fix this? (I need multiple video players on single page, so using only one player and switching video files URLs is not a solution)
URL: http://iuvomedia.eu/chromecast/


If you want one video to play and other to be pre-loaded then you should make a queue of videos you want to play. Chromecast will play single video at a time and when it ends it'll automatically load the next one in the queue.
For information on autoplay and queuing you may visit https://developers.google.com/cast/docs/autoplay


You cannot have more than one active media element.
I mean, you can have two media elements where one plays a video that doesn't have any audio and the second one plays only audio.
You cannot have two active video or two active audio pipelines at the same time.
check here: Create multiple instances of html video object

Related

Using the VLC plugin of a web page, how do I keep the last frame of the previous video while switching video?

I am doing a live website.
I use the VLC plugin to play the video stream.
When I switch between different videos, the VLC logo will always appear in the middle of the two videos.
I hope this logo screen will be replaced by the last frame of the previous video.
How should I set up the VLC plugin?

Don’t use VLC. Use the video tag, or MSE.

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.

HTML5 video - multiple video files

Is it possible to playing multiple video files (pieces of single video) in the same player with common timeline? This must look like single video. It is posible?
I can't glue fragments in the signle video because of disk space problem. I'd like stream multiple files sequentially by request of user.
The requirement of HTML5 is from iPad/Android 4.1+ compatibility

It's a little hard. Can two Video traces be played with same common timeline. Camtasia Recorder 8 could transcribe videos you could have a try. Macgo Mac Blu-ray Player cannot support this function now. I used it for several years. But it could open 2 videos with two different windows. If you tried and success, please let me know. Haha..

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.

How to choose a specific video stream from an MKV file with multiple video streams, using HTML5 video tag?

I have a .mkv file with 2 video streams in it.
While playing in browser with HTML5 video tag, how do I select a specific stream ?
I have tried
video src="1234.mkv#Strem 0"
but it does not work

I hope this will help:
HTML 5 Video Player with multiple video streams

HTML5 video tag, as yet, does not support playing multiple streams within a single file.
Having said that, there seems to be some work going on to support such a feature.
More information at following links
(x) http://blog.gingertech.net/2011/05/01/html5-multi-track-audio-or-video/
(x) http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#media-resources-with-multiple-media-tracks