Video streaming with HTML5 video player - spring-boot

I'm trying to get into how the video streaming with HTML5 video player works and have some questions about that.
I have such a declaration at my HTML page
<video controls class="card-img-top">
<source src="/stream/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The URL /stream/video.mp4 is handled by the Spring Boot controller which sends the data. All works fine but how I see it very inefficient.
Every time I move the slider on the video timeline to any point I see the requests with Range header like
Range: bytes=88375296-
Range: bytes=39354368-
Range: bytes=60915712-
That's mean at every video scroll I have to provide all the data from a specified point to the end of the video file. That looks really inefficient.
Is there some way to configure HTML5 player to work in more efficient way? Also, could you recommend something to read about video streaming implementation with Spring Boot?

That's mean at every video scroll I have to provide all the data from a specified point to the end of the video file.
The browsers requests all the data form the specified point to the end of the file, BUT, it can simply disconnect the TCP session to stop the downloading when a seek happens. Its is as efficient as it can be.
Is there some way to configure HTML5 player
No, When you tell the browser to play an MP4, you give ALL control to the browser. You there are no options to control how it works.
If you want more control, you can use Media Source Extensions. But then you will need to use more advanced file formats server side and implement all the details of how the player works. See HLS/DASH

Related

Too many https requsets when web Rqeusting just a single MP4 Video

as you can see in the picture, the chrome has download too many clips of a video when playing a video online.
In rear end, I use springboot WebMvcConfiguer to filter the requests, when request url has '/files/**', it will let the request get the video directly
how can i solve this request problem , and just make the request like this below
Many thanks
I think this is due to the browser loading the video over time versus all at one time. This is typically done for performance reasons and it doesn't seem like chrome likes people working around it. Here is a link to another post about the same thing.

Play SHOUTcast DNAS without entering admin panel

I need URL of a SHOUTcast streaming to be played in browser without entering administration panel and without adding "/;" Nor "/stream" at the end of the URL.
I give you the example of 2 SHOUTcast streaming URLs where one does what I want and the other does not.
If you open this streaming A in Mozilla Firefox you will see that a player appears and plays the sound. Now if you open this streaming B in the same browser you will see that it goes to the Shoutcast administration panel.
(I advise you to watch it in Mozilla because if they do it in Chrome or any Chromium based browser, the player will not be seen because these last browsers download streaming instead of showing the player.)
To achieve the same thing as streaming A, it would be enough to add a slash and a semicolon at the end of streaming B or "/stream" and this would result.
But that solution does not work for a project I'm testing, I need the streaming URL to end in the port with nothing later, just like streaming A.
I've been searching the internet for information for over a week and haven't found anything on how to accomplish this.
Someone help me please.
Best regards
Juan
I have fixed the problem in another way.
I have created independent variables for sound URLs and metadata.
To get metadata I have used https://host:port
And for the sound https://host:port/stream
This way I avoid that the browser recognizes my streaming as html and it plays without problems and I get the metadata correctly . :)

Brightcove: Adding preroll and postroll ads

I am trying to implement preroll AND postroll adverts via the Brightcove player.
There are 1000's of videos, so it's not as simple as adding cue points to the media - need to aplly this to all videos.
The documentation is not helping much.
Anyone now how i can do this?
I can also achieve this by calling an ad at 0 seconds (preroll) and the total duration of the video minus 1 second (postroll)
I have the a valid ad server URL which works fine.
Thanks in advance.
If you have a server URL, you will need access to the Brightcove Players Module. The 'Advertising' section lets you enter the Server URL, as well as specify when Ads are displayed, the technology (Html5 or Flash preferred) and other options.
All videos shown through that player should then display your ads (unless the specific videos have been set to not show ads).

A-Frame: Is it possible to have a-videosphere have a src link to a youtube video instead of a locally stored video file?

I want to be able to do this
<a-videosphere src="https://www.youtube.com/watch?v=diBozKDxVLI" autplay="true"></a-videosphere>
Is there any way I can without pointing to a locally stored file?
You can't render a YouTube video as a texture in WebGL. YouTube does not offer an URL to extract the video source. The official player is the only way they have to place ads and monetize the service. If you could stream a video directly you would be able to freely redistribute YouTube content. Technically, it's possible to create a web service that downloads YouTube videos and expose them through a streaming endpoint but it will go against the terms of service:
https://www.youtube.com/static?template=terms
https://aframe.io/faq/#can-i-render-youtube-videos-as-a-texture
With some manual effort, you could either proxy YouTube videos as a texture or download them locally to serve, but that is against their terms of service.

Bootstrap Carousel to play mp4 with ajax

I'd like to stream and play videos from my django site, I've already converted them to mp4 and was thinking about using the carousel widget with bootstrap to play them. Of course I would like to only load the current video and lazy load the rest, as there could be serveral.
I've been scouring the net to find good examples with ajax functionality, not going well, thoughts?
Thanks in advance
You could use $.get() to load data from the server whenever the previous or back arrows are triggered.
api.jquery.com/jQuery.get

Resources