I start my player like this:
const player = new Player();
player.playlist = new Playlist();
player.playlist.push(new MediaItem("video", "http://example.com/example_video1"));
player.playlist.push(new MediaItem("video", "http://example.com/example_video2"));
player.playlist.push(new MediaItem("video", "http://example.com/example_video3"));
player.present();
For the first video it just plays as expected but after the video finished it changes to the second video but I can't get it to play.
I already tried using event listeners like this:
player.addEventListener('mediaItemDidChange', (e) => {
player.play();
});
But nothing seems to work.
Edit:
I have tried it with a different video from another source and it works, so it's probably a problem with my videos.
The second video I tried is a .mov and my videos are .mp4 but that shouldn't be a problem. Right?
I also have compared the HTTP headers for both video requests.
Here's the video that works:
HTTP/1.1 200 OK
Server: Apache
Last-Modified: Mon, 12 Aug 2013 22:51:47 GMT
ETag: "83-4e3c7f81586c0"
Accept-Ranges: bytes
Content-Length: 131
Content-Type: video/quicktime
Cache-Control: max-age=1384
Expires: Wed, 25 Jan 2017 10:11:37 GMT
Date: Wed, 25 Jan 2017 09:48:33 GMT
Connection: keep-alive
And here's my video:
HTTP/1.1 200 OK
Date: Wed, 25 Jan 2017 09:49:44 GMT
Server: Apache/2.4.10 (Debian)
Access-Control-Allow-Origin: *
Cache-Control: must-revalidate
Expires: Wed, 25 Jan 2017 09:49:44 GMT
Set-Cookie: JSESSIONID=#######################; Path=/streams/; HttpOnly
Last-Modified: Wed, 25 Jan 2017 09:39:14 GMT
ETag: "13509625_1485337154000_05761_588871a8-4033Vid.mp4"
Content-Length: 13509625
Content-Type: video/mp4
My video doesn't have the "Connection: keep-alive" and "Accept-Ranges: bytes" headers. Could this be the problem?
Edit2:
I have tried serving both the working video and the video that doesn't work from a local http server. It seems like the headers aren't the problems since the video that worked before still works and the one that didn't still doesn't.