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>
Related
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>
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?
I have a project where I am to watch a video for specific information and select a choice then click submit, then the next video is loaded. The loading between videos tends to be upwards of 5 seconds and I would like to have the videos preloaded.
How can I edit the source code of the page to preload the next videos before clicking submit?
Here is what it looks like
You can use the preload attribute in the HTML5 video tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
See the note also about it being a hint - most browsers currently follow it:
Note:
The autoplay attribute has precedence over preload. If autoplay is specified, the browser would obviously need to start downloading the video for playback.
The specification does not force the browser to follow the value of this attribute; it is a mere hint.
The snippet below shows an example. Note that it is important you videos are optimised for streaming also if they are mp4 with the header at the start - see YouTube recommendations:https://support.google.com/youtube/answer/1722171?hl=en and the info with the Quickstart tool here: https://github.com/danielgtaylor/qtfaststart
You can use this tool, ffmpeg, Handbrake etc to make this optimisation - for example: https://stackoverflow.com/a/50914703/334402
var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");
vid1.onloadeddata = function() {
vid1.currentTime = 882; //Go to end of video for this illustration
vid1.play()
};
vid2.onloadeddata = function() {
vid2.pause()
};
nextVideoStart = function() {
vid2.play()
};
<video id="MyVid1" width="320" height="176" controls preload="auto">
<source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
Your browser does not support this video format
</video>
<video id="MyVid2" width="320" height="176" controls preload="auto">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
Your browser does not support this video format
</video>
<p></p>
<button onclick="nextVideoStart()">Click for next video</button>
HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.
The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.
My code looks like this:
<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
// sources here
</video>
I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).
I've given a look as well, and it seems as many CSS and JavaScript solutions out there don't work anymore, because since iOS 12 there is a new way of handling videos (https://www.reddit.com/r/apple/comments/8p4tpm/ios_12_to_include_custom_html_video_player/).
Now I came up with this idea, which as a purist I don't like, but it might do the trick: A video thumbnail (as image) overlayed over the video, that gets hidden, once the video is started.
You could have a standard thumbnail with title, or dynamically generate it (see http://usefulangle.com/post/46/javascript-get-video-thumbnail-image-jpeg-png as an idea).
Hope this helps!
I know this was asked over one year ago but I wanted to share the solution for others.
What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.
const video = document.getElementById('video-input');
video.play();
Setting autoplay to false and controls to false did work for me:
<video
src='xxxx'
muted
className='landing__empty-video'
loop
playsInline
autoPlay={false}
controls={false}
preload='auto'
type='video/mp4'
/>
Bear in mind this was React, in html case it would be "false".
After trying several solutions on the internet and without success, I eventually managed to hide the video interface elements in autoplay when the save mode is enabled.
document.getElementById("hello").setAttribute("autoplay", "autoplay");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="hello" playsinline preload muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
https://jsfiddle.net/joelsilvaaaaaa/yb5s23xq/3/
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.