I'm developing a website using MVC5-html5(actually it will only has a limited number of user,may be 5-10 ). Now, I play video through video tag in html5.
<video width="400" controls>
<source src="myVideo.webm" type="video/webm">
Your browser does not support HTML5 video.
</video>
But in order to load the video, It takes time to get the video file from my server to clients and sometime it gets lagging. I wonder is it possible for me to let my client save these videos in their PCs and for the next time, we read direct video from there(let's say from C:\temp folder). Don't need to download from the server again.
Thank you for any though/ suggestion.
Related
My team and I are making a custom html video player and I'm working on a setting panel
And the first option we are mainly worried about so I'm adding first is the video quality option.
<video id="video" class="nm" poster="the poster url">
<source src="video source url of the video at 480p" type="video/mp4" size="480">
<source src="video source url of the video at 720p" type="video/mp4" size="720">
<source src="video source url of the video at 1080p" type="video/mp4" size="1080">
</video>
And now what we want to do is when the user toggles on an option it will change the video source to the source that has the quality specified by the size attribute
Image reference here
PS: We are making a video player from scratch as It is on its own built with no APIs (e.g. Video.js, JWPlayer, Plyr) We are making all the things needed from scratch with pure javascript and html... and as we're making a website for streaming, and my team and I want to make a video player made by us for the website, and "maybe" later for distribution but for now we want to make a brand new video player and were just been putting this part off as we aren't sure of the best way to do this!
Edit
Also, we want the video to pause and change the quality and pick up off where it was paused
Note that for the native video the browser will decide which <source> to show and choose the first element it supports/understands (e.g. the first supported video file format): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Usage_notes
To circumvent that and force the browser to show a certain video source url, put in only one <source> element and manipulate the source property with javascript.
To pause and play the video in the native HTML5 video player you may use the API of the HTMLMediaElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
It has the play and pause functions you're looking for.
I'm building a website that queries the iTunes API, and in the browser I need to be able to play the 30-second song previews associated with each song in the API (which are in .m4a format)
I've tried playing the file in both of the following ways, but neither worked:
<audio controls="controls">
<source src={track1} type="audio/m4a" />
</audio>
<video width="320" height="240">
<source src={track1} type="video/mp4">
</source>
</video>
When I tried using the audio tag, a media player appeared on the page, but it didn't actually load the file.
I've been researching this for a couple of hours but I haven't been able to find a way of accomplishing this (it doesn't seem like it should be this hard). Does anyone have any ideas of how I might make get this working? Thanks very much
Did you check the path of your sound files is correct? I was having this same issue on a React project.
Check the network tab in Dev tools to see what the status code is for your sound file resource. If it's 206 then it's most likely a file path issue:
I have a video element which I'm controlling the full screen and play via a dedicated button. Otherwise the video element is hidden.
<video controls>
<source src="/video.mp4" type="video/mp4">
</video>
<button>play</button>
Plays fine. However, the initial playback on Safari 13 Catalina takes an additional few seconds over other browsers. Checking the network tab doesn't reveal any pre-loading. It seems Safari has a higher buffer threshold before playing.
Is there a workaround for this behavior?
Setting preload="auto" on the video tag should make the video seem to start faster, if you are not concerned with extra bandwidth.
A further optimization would be to try serving an HLS stream in addition to the progressive download mp4. You don't need a special server to do this, a conventional web server can serve HLS live streams if they are correctly encoded/packaged.
I'm making a custom scrub bar in HTML video player. I'm creating a HTML5 video player and take a currentTime from video and it is working good, but seting currentTime after moving a scrub bar dose not working.
Firstly, I want write I've tried several possiblity to resolve this problem. I disable autoplay in video and other things, what can be.
But, one thing puzzles me. I can not have a directly URL to the video, I have a URL to JSP code on the server, and this code return to me this file. What can be a problem with it? Because, if I downloaded this movie file and set URL to directly to this movie file - with extension .mp4 - all starts working good.
Maybe it's problem with it I can not have a directly url to movie file?
I don't have any ideas to resolve this porblem. I'm counting on your help
if the video stored as an .mp4 or .ogg or .webm video file format, It would play. Here is how your html may look like.
<video controls preload="metadata">
<source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
<source src="http://www.example.com/waterfall-video.ogg" type="video/ogg">
Video not supported.
</video>
I'm currently building a website for a client.
My client wants a specific song to play throughout the entire website (I have the MP3 & OGG audio files locally) however, when I go onto another page the music will play from the beginning.
<div id="music">
<audio controls loop autoplay>
<source src="audio/oud.ogg" type="audio/ogg">
<source src="audio/oud.mp3" type="audio/mpeg">
Your phone does not support the audio element.
</audio>
</div>
In order to do this, you will have to do one of two things:
Create a single page application (this is the cleaner solution),
or
Create a page with an iframe that wraps the entire site and
play the file in the main file
However, I would very much caution against doing what you are doing, it is an accessibility violation to play audio automatically for more than 3 seconds without the ability to turn it off and it will be an irritation to any blind or visually impaired users who visit the site using a screen reader.