Gfycat video in Safari - javascript

I'm embedding gfycat video on a page without iframe.
Gfycat stores videos in three different places, depending on it's size: zippy for small, fat for bigger and giant for the largest. I know only video ID and don't know where it is stored.So, I just add sources for each store.
Here's code repeating the inner structure of iframe embed:
<video preload="none" loop>
<source src="//zippy.gfycat.com/{{ID}}.mp4" type="video/mp4">
<source src="//fat.gfycat.com/{{ID}}.mp4" type="video/mp4">
<source src="//giant.gfycat.com/{{ID}}.mp4" type="video/mp4">
</video>
After it I call play method, here's exemplary JS:
video_element.play();
For example, this video stores at giant store. So, first two sources responses with 403 code, but last source is valid and video is playing.I understand that this is not really beautiful solution, but it it works well in Chrome, Firefox and Opera. But not in Safari.
Safari applies first source, it responses 403 and then other two sources doesn't apply automatically, as it happens in other browsers.
So, haw can I solve this problem? Given that I can use only JS, do not know the store and can't use iframe.
Here's jsfiddle to test.

It's not good practice to formulate urls in that fashion as they could change at any time. In fact, it looks like the zippy and fat subdomain urls are not being used by Gfycat anymore.
You should instead use their api to retrieve the data in JSON format and use javascript to update the source urls of the video element.
You may want to check this out: https://github.com/gfycat/gfycat.js

Related

loading="lazy" but for html5 videos

I'm making a scroll-able gallery with flask that shows many<video> elements, the video files are small but it still generates a lot of http 206 requests, which are bottle-necking flask.
<img> has loading="lazy", which is very convenient.
Is there some way, javascript only or css, to implement such behavior but for <video>?
I may use preload="none", but it won't display the first video frame.
you may use a part of this solution :
<video preload="none" src="video.mp4"
autoplay="false" poster="poster.jpg"
muted="false" loop="false">
</video>
If preload is none, the web browser don't preload the media, but i advice to replace an image with poster attribute.
Preload explanation here
autoplay explanation here
loop explanation here
poster explanation here

Video background not displaying properly on some computer

I am meeting an error on my website and I can't put my finger on it, the custom video background I'm trying to implement works on some computers and doesn't on the some other.
It is not a problem of browser version since I tried it on 5 computers with the same versions and there is still 2 computer who fail to run the javascript on this specific area (it either works on all browser or the javascript goes off on all plateforms).
I think it is a problem of computer but what should I in order to make the JS of the video background work ? (If you can't pause or play the video, or if it launch as soon as you enter the page then you also have this issue)
Here is the website : www.fyz.ch/VR
Any thoughts ?
Maybe you need to convert the video in multiple file formats (mp4, webm and ogv).
I think you made a wrong structure for it and put a source tag outside of the video tag.
Add them like this :
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Your browser doesn't support the video tag
</video>
Moreover, it seems like you added the autoplay attribute to the video tag. So it's the normal behavior for the video to launch itself as soon as the user enters the site.
Could you provide some code to be sure of what your problem is ?

Chrome HTML5 video with mp4/webm loaded via PHP fpassthru(): can't set currentTime?

So this is an odd issue I'm running into. I've only tested Chrome and Safari, both on Mac, and between those browsers the problem only manifests on Chrome.
I have a very basic HTML5 video element, which loads a video from my server, and the user has a few buttons onscreen to jump to specific times within the video.
When the video file is referenced as a direct link, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="videos/vid102.webm" />
<source type="video/mp4" src="videos/vid102.mp4" />
<p>Your browser does not support this video.</p>
</video>
...it works just fine.
However, I've just set it up so the videos can be instead loaded via a PHP fpassthru, e.g.:
<video id="thevideo" width="720" height="480">
<source type="video/webm" src="getvideo.php?t=webm&v=166" />
<source type="video/mp4" src="getvideo.php?t=mp4&v=166" />
<p>Your browser does not support this video.</p>
</video>
where getvideo.php looks something like this:
<?php
$videoID = $_REQUEST["v"];
$videoType = $_REQUEST["t"];
$vidPath = "videos/video$vidFile.$videoType";
$fp = fopen($vidPath, 'rb');
header("Content-Type: video/$videoType");
header("Content-Length: " . filesize($vidPath));
fpassthru($fp);
?>
The strange behavior is this: On both browsers, the video loads and plays just fine. On Chrome, however, the version using the fpassthru PHP script breaks the ability to set the player's "currentTime" attribute and thus jump to somewhere in the video. If I call document.getElementById('thevideo').currentTime = 50, instead of jumping to the 50 second mark, it just stays where it is.
Any idea why this might be?
UPDATE:
I've seen some indications that this has something to do with Chrome specifically requiring the "Accept-Ranges" header to be provided in the response. I've added the header "Accept-Ranges: bytes" to the .php script's output, and I've made sure that the web server is allowing byte range requests, but still, it's not working.
You are correct about requiring the "Accept-Ranges" header, as part of HTTP Byte Serving. I suggest reading this answer to a similar question:
Seekbar not working in Chrome
Adding the response header is not sufficient. You have to also respond with the "206 Partial Content" status code and return only the requested range of bytes. It sounds like you're still returning the whole file. fpassthru will read back the file all the way to the end, so it looks like you're going to need to find another way to read the file.

Unable to pause videojs on load if autoplay is enabled

this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).

HTML5 video playback on the iPad?

I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.

Categories