Html <video> first-frame poster on iPad - html5-video

I'm trying to have a video that loads the first frame of the video as the poster but doesn't autoplay. I need it to work on desktop, iPad, and iPhone.
Desktop: You don't need anything special, this will load the first frame as a poster
<video>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
iPhone: This takes a bit of a hack since on iPhone the poster isn't automatically loaded. By adding "autoplay" the browser loads the first frame as the poster, but without adding "muted playsinline" it won't actually autoplay
<video autoplay>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
iPad: The iPad acts like the iPhone by not pulling the poster by default, but if you add in "autoplay" like I do on iPhone it actually autoplays which I don't want.
So how would I go about pulling in the first frame of the video as the poster without it trying to autoplay the video on load?
I've also tried preload="metadata" and it did not work.

I solved this problem by adding autoplay to my video tag and pausing the video on load this way:
window.onload = function(){
var myVideo = document.getElementById('myVideo');
myVideo.pause();
}
<video id="myVideo" autoplay controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

Looks like adding the time for 0.1 seconds does the trick too.
<video>
<source src="1616911307745.mp4#t=0.1" type="video/mp4">
</video>

A similar approach to Hemmingsen answer but instead of using the onload event on the window object you can use onLoadedData on the video element itself instead:
function handleLoadedData(event) {
event.target.pause();
}
<video autoplay onLoadedData="handleLoadedData(event)">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
PS: The key here is to use autoplay on the video so Safari will load the poster image but immediately stop the video after load so it won't autoplay it.

Related

Show video controls in html5 when right click is disabled

I have disabled right click on my website's videos because I want to discourage downloads. To that end I use the following code:
<video oncontextmenu="return false" controls="controls" controlslist="nodownload">
<source src="..."> video
</video>
However, with this users don't have the Controls' functionality. In particular, they cannot move forward or backwards with the keyboard arrows. Normally, to enable this functionality, you have to right click the video and select "Show Controls", as shown below:
Naturally, in my case that is not possible.
How can I enable those controls by default, so I can keep hiding that context menu? I've searched through default <video> attributes but can't find any relevant for me. Any ideas?
To disable right-click on video tag and yet keep video controls, try my example below:
What the codes does:
Gives your video tag an ID (see: id="myVid" )
Uses Javascript's preventDefault(); to block right-click on a specific item by its ID. (Eg: You might still want right-click to work on other [non-video player] parts of the page.)
Testable code example:
<!DOCTYPE html>
<html>
<body>
<video id="myVid" width="640" height="480" controls="controls" controlslist="nodownload">
<source src="filename.mp4" type="video/mp4">
</video>
</body>
</html>
<script>
//# use this line to prevent context menu in Video Element
document.getElementById("myVid").addEventListener('contextmenu', function (e) { e.preventDefault(); }, false);
</script>

Providing video with unlimited length via ASP.NET Core webservices

I want to make a video file available via an ASP.NET Core web service.
If I use:
[HttpGet]
public IActionResult Get()
{
return File(#"videofile.avi", "video/webm");
}
And access the video with vlc media player or a webpage like that:
<html>
<body>
<video id="video" preload="auto" width="320" height="240" controls>
<source src="http://localhost:39589/mycontroller" type="video/webm"/>
</video>
</body>
</html>
It seems that the video starts only when the complete file is transferred. I want the video to be transferred asynchronously, so that the video starts although it is not complete transferred.
Background: the video is constructed on the fly and will be in unlimited length (it will show the current time, so video is generated realtime in memory and should be transferred to web page every x frames). The goal is a webpage with a video which shows the current time live and infinite.
Edit: I got it working, I use a PushStreamContent object now.
When I use a mp4 (h264 codec) video now, the video starts playing although the complete video is not yet transferred (good, that is what I want).
But this seems not to work with a webm video (vp9 codec). Here the html video objects waits until the whole file is transferred. Is there a connection between codec and the behavior of html video player (e.g. if it starts playing although the file is not yet complete)?
You can try to use enableRangeProcessing.Here is a demo:
Action:
public IActionResult GetVideo()
{
var f = PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(), #"wwwroot\video", "1.mp4"), "video/webm", enableRangeProcessing: true);
return f;
}
View:
<video id="video" preload="auto" width="320" height="240" controls>
<source src="https://localhost:44300/B/GetVideo" type="video/webm" />
</video>
result:

Videojs can't play m3u8 blob URL

I am using Videojs version 7.6.6. It will not play a html5 video if the src is a blob URL. It will load the video time however, but will not play. I get this warning, and then it loads forever:
VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.
This is the way my code runs:
<video id="my_video" class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered" controls
preload="none" width="640" height="268" data-setup="{}"></video>
<script type="text/javascript" src="/js/video-766.min.js"></script>
<script>
fetch("https://server/hls/index.m3u8").then(result => result.blob())
.then(blob => {
var blobURL = URL.createObjectURL(blob);
var player = videojs("my_video");
player.src({ src: blobURL, type: "application/x-mpegURL" });
}
);
</script>
If I try it without a blob, just a regular URL to the index.m3u8 file, then it works. So this is a problem with the creation of the blob URL I think. This works, the video starts playing:
<video id="my_video" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="https://server/hls/index.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('my_video');
</script>
I have searched for this issue and found a lot, but none of it helps me. Am I creating the blob wrong?
The object URL that is generated for the blob will start with file:// protocol if I'm not wrong. Browsers doesn't let you load data with file:// URL. I ran into a similar problem so I created a simple server on my app which returns the requested file over https:// .
The reason why your index.m3u8 is running because it is served over https protocol

videojs in Chrome: how to make a video starts where I choose?

I am playing with video.js. Here is my code:
<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" style="margin-left:auto;margin-right:auto;"
controls autoplay preload="auto" width="1300" height="800"
data-setup='{}'>
<source src="/test.webm" type="video/webm" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
The above code was literally copied from the tool's website (except the video and autoplay):
http://docs.videojs.com/docs/guides/setup.html
My movie is played in both Chrome and Firefox. If I want to see something later in the movie, I am able to drag the dot in the progress bar to the point I want and the movie starts just there. However, when doing so in Chrome I got error:
A network problem caused the media download to fail part-way.
You can do it with javascript
videojs("last", {}, function () {
var myplayer = this;
myplayer.currentTime(s); // s being to time in second you want
}
Remove the data-setup attribute from the html tag and put what you had in second argument.
The first argument is the id of the video(be sure it has never been
initialized)
The second is optional it is what you want to have in data-setup
The third is a function that you want to call when it is
initialized.

Having videos autoplay in modal window

I am using a modal window to display multiple videos, but my autoplay seems to be ignored in the modal window. If I have the video on the page and it is not hidden the autoplay is fine. Do I need to do something else to trigger the autoplay in a modal window?
I am using SimpleModal to do the modal window. For the video I am using a simple video tag and an mp4 video with the autoplay boolean on.
Any help would be appreciated.
I was only able to get this to work by using a javascript play() call in the 'open' handler for a jQuery UI dialog. No other method would work.. maybe simplemodal has an analog? Here is the solution for jQuery UI:
$('div#mydialog').dialog({
open: function(event, ui) {
$('video#myvideo').get(0).play();
}
});