How to make <video> await http source? - html

I have simple .html file and simple videoplayer in it:
<video controls autoplay muted preload="none" >
<source src="http://127.0.0.1:8080">
</video>
However, the HTTP stream does not turn on immediately and I do not know the exact moment when this will happen. The Firefox player does not wait for the video and throws an error like (Video is in unsupported format, it is not True). Is there an html attribute that causes the source to wait?

Related

Unable to play a video using autoplay loop features inside <video> tag

I am using a video tag in which I have downloaded a timelapse video from Pexel and have included the mp4 file inside VS Code folder. After I type autoplay, loop inside the video tag, the video is not playing. Here is the code:
<video width="320" height="240" autoplay loop>
<source src="Flower.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
The video remains static. What could be the problem with the video tag? Is the format of the video tag, ok?
I did also type like this:
<video autoplay loop src="Flower.mp4"></video>
But the same old result is being shown i.e. video is static.
Please suggest as to what should be done here.
The issue might be due to the unsupported video format by the browser. Can you try converting the video to a different format such as H.264 or WebM and see if it works? Also, make sure the video file is in the correct path specified in the 'src' attribute of the video tag. If the video file is still not playing, try adding the 'controls' attribute to the video tag to check if the issue is with the autoplay and loop attributes.
<video autoplay loop controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
By adding the 'controls' attribute, you can check if the issue is with the autoplay and loop attributes, or if the video file is simply not playing.
Update:
const video = document.getElementById("myVideo");
video.loop = true;
video.autoplay = true;
video.play();
<video id="myVideo" controls>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>

Html video won't autoplay on ios with playsinline

I have an html video that I'm trying to render on ios but the video won't autoplay. I found similar questions mentioning to use "playsinline" but I tried this approach and it doesn't fix the issue in my case. Here is how I'm currently displaying the video in Html:
<video class="remoteVideo" playsinline autoplay muted>
<source src="https://192.168.1.134:7278/GetVideo" type="video/mp4;" />
</video>
This gets streamed from some C# .NET Core code:
FileStream fileStream = new FileStream(path, FileMode.Open);
var result = new FileStreamResult(fileStream, contentType)
{
EnableRangeProcessing = true
};
return result;
This approach works great in chrome but on ios its getting this issue where it won't autoplay. If I add "controls" to the video in html then the play button will appear on ios and I can press play and the video will start playing. However, I'm looking to get the video to autoplay and without the video controls.
So, I'm not exactly sure why but, Changing my html to this (with the src specified directly in the video html rather than in a sub "source" html class) fixed the issue:
<video class="remoteVideo" src="https://192.168.1.134:7278/GetVideo" playsinline loop muted autoplay></video>

html video mp4 not supported/invalid file path internet explorer

for some reason my website doesn't want to play mp4 videos, giving the error: "non-supported video type or invalid file path" (or something symilar like that, translating form dutch). but when I try to watch the same video in this jsfiddle, it works fine, is there something I'm missing in my video player?
<video controls autoplay class="fullsize hide" id='videoThing'>
<source type="video/mp4" src="videos/Reduce Co2 Of Transport-24.mp4">
</video>

html audio tag is not auto playing the audio

Here follows the code snippet am using where TextToSpeech is a servlet which returns audio stream (via ServletOutputStream).
<audio autoplay controls>
<source src="/TextToSpeech?input=Welcome" type="audio/wav" />
Your browser does not support the audio element
</audio>
But Chrome browser is NOT auto-playing the audio. Can any one help me please?
P.S: I did test the audio stream by saving it to a file and it played well. So no issue with audio that returned from the server.
On mobile the audio autoplay function is usually disabled in order to avoid data traffic usage without explicit action from the user.
You could workaround that using javascript, when the page is loaded (i.e. jQuery.onready() ) you can start playing the audio file with something like that:
var audio = document.getElementById("audioId");
audio.autoplay = true;
audio.load();

video.js unexplained error

I have the following code:
<video id="v2" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264"
data-setup="{}">
<source src="uploads/5148dc022c494_183a658049ae973e1f3451450d689f39.wmv.mp4" type='video/mp4'>
</video>
I've implemented the relevant JS scripts at the <head> tag and I can see the player frame loading including the controls, however the video is not displayed.
When I check the console log I can see some sort of error, the only thing I can see is:
Video Error
_V_.Event {originalEvent: Event, type: "error", isDefaultPrevented: function, timeStamp: 1363730623374, vdata1363730622853: true…}
I can unfold that message to view more details but nothing really tells me why the script fails.
The video itself is working when I download it. I can watch it with my windows media player without any issues.
Note: I'm using the latest Chrome version (tested IE10 as well, not working).
Most obvious reply would be to say that your video is not mp4 but wmv
either convert it to mp4 or use wmv type attribute
mind the extension which is currently .wmv.mp4