My website currently loads a video in the banner when a desktop user visits the webpage. Currently the video is hidden but will still download if the user is on a mobile device. I would like to keep the video from downloading if the screen size below a certain count. I'm not sure how to go about this, I know of the display:none that can go along with CSS but this still downloads the file which is something I'd rather not do if the video isn't going to show at all.
If jQuery is fine, here's something you can try:
$(function(){
if($(window).width()>640){ //add video only if screen width is above 640px
$("body").append(yourVideoHere);
}
});
You need to first check to see if the screen is the appropriate width and then load your video source. Something like this should get you started.
var videoElem = document.querySelector('video');
var yourThreshold = 600;
if (screen.availWidth >= yourThreshold) {
videoElem.append('<source src="yourVideo.mp4" type="video/mp4"');
}
You can of course decide how specific you want to be as far as targeting devices. Just the width alone might not suffice.
Depends how you are trying to load the video, I would recommend the HTML5 video element with the preload attribute set to none so the video does not automatically begin to download. You could also then look at using a script that allows you to swap out video files depending on screen resolution, so for mobile you could load a smaller video size, a script that can get you up and running quickly is enquire.js. Hope this helps.
<video poster="image-location.jpg" preload="none">
<source class="mp4" src="video-location.mp4" type="video/mp4">
<source class="webm" src="video-location.webm" type="video/webm">
<source class="ogg" src="video-location.ogv" type="video/ogg">
<!-- Fallback Content such as embed YouTube video-->
</video>
How to do it based on screen size
see the other answers, measure screen size with javascript and only add the video tag, or set the source, if the screen size is big enough.
There's a gotcha if you use jquery as the <video> functions like .play() are javascript functions and won't be available to a jquery object.
How to actually do it
The best current solution for the problem of avoiding sending large video files to devices that haven't got the available bandwidth to handle it is currently server side and relies on the much more reliable metric of actual bandwidth. This is what YouTube do.
Consider the following two scenarios:
I'm at home, I have my smart phone connected by wifi to my high speed internet connection and the signal is good, but my screen resolution is reported as 480px - why should I be denied a video?
I'm out of the house, I've connected to wifi on a train, but the signal is horrible, my screen size reports as 1600px so I get a huge video, your site doesn't load and I go visit your competitor.
You can find out more about this here at MDN, and about one of the key tools, ffmpeg here, or you can use Any Video Converter to do a similar thing in a desktop GUI if you have full control over the videos. It's complicated and difficult and you may be better off using a third party service.
Related
I am developing a video based timeline where each video will be played automatically while scrolling.
I'm only showing one video at a time when it scrolls into view, and then I'm removing DOM video node as it scrolls out and thats working perfectly fine.
{this.state.playing == key &&
<video autoPlay muted loop>
<source src={"/static/webm/videos/"+video.webm} />
</video>
}
The problem I have are slow networks, if a user has slow internet connection and keeps on scrolling every removed video they scrolled past even though no longer existing in the DOM tree continues to be downloaded which causes the website to very quickly come to a halt and waste my resources.
As you can see in here when I tested my site with dev tools and throttling enabled:
So my question is how do i stop video from being downloaded in the background after its been removed from the DOM before finishing the download?
If you use the built-in video support in the browser then there is no way to control the amount of data that's being buffered. It depends on the browser implementation and there is no API to control it.
Your best bet here is to use another player implementations which support these functionalities like dash.js, Bitmovin Player
I want to make a Web page that has a video on it, but I only want the users to be able to see the video if they are logged in. The content requires a subscription, so I'll need to make a custom video player with HTML5 because the built-in video player on some browsers has a download button, and I don't want the user to be able to save the video on their device and put it on the Web so that everyone can see it for free. However, even if I do this, the user can still just open up developer tools, expand the video element, and see all of the URLs to the video.
<video>
<source src="./video.mp4" type="video/mp4">
<source src="./video.ogg" type="video/ogg">
<source src="./video.webm" type="video/webm">
</video>
Then, the user can just navigate to one of those URLs, effectively bypassing anything that I set up. Actually, I might be able to prevent the user from navigating to one of those URLs, kind of like YouTube, but that doesn't mean that the user won't be able to use something like https://www.onlinevideoconverter.com/ to download the video.
I need a way to play the video without exposing the URLs in my frontend code. A solution with HTML5, CSS, and JavaScript without any additional libraries is preferred.
Serve the videos from a node.js express.js route that requires authentication and / or authorization to see. Take a look at https://github.com/deitch/cansecurity e.g.
The content requires a subscription, so I'll need to make a custom video player with HTML5 because the built-in video player on some browsers has a download button
Just turn off controls.
and I don't want the user to be able to download the video and put it on the Web so that everyone can see it for free
You can't do anything to prevent this. The content is trivially downloaded. The best you can do is implement DRM via Widevine or similar, but this is definitely not foolproof.
I would like to display a webpage with a wall of very short videos:
The videos are 1-2s long and all the same size (about 100px wide)
They are display in the form of a matrix (e.g. 10x10)
Playing the videos is triggered by user interaction (click or hover)
So far, I have tried inserting video tags using jQuery but when I reach about 60 videos, my browser (Chrome) hangs.
My question: is there a trick to display such a large quantity of videos on a single web page and what issue should I look out for to make sure the videos are ready to play before the user starts to interact.
EDIT: I understand this isn't common practice, but this project is an art installation and I need to be able to trigger all the videos (or moving images) on demand and without delay. On the other hand, the initial loading time doesn't matter so much, as the user will be made aware of the heavy load.
Thanks :)
IMO "videos are ready (...) before the user starts to interact" contradicts a leightweight DOM. You cannot have both. I'd try to show thumbnails and initialize the video with the interaction.
you could try to use the
use the
<video width="320" height="240" controls>
<source src="embed Link" type="video/mp4">
Your browser does not support the video tag.
</video>
tag inside of html. then you can acces every object by giving it a tag
I have an HTML5 web-app that has sound effects. I'm trying to get these effects working in iOS5 and can't for the life of me.
Wondering if anyone has any work-arounds to get JS control of an HTML5 audio/video control in iOS5.
Or even a way to control multiple audio files with one click. As it stands right now, if I have 10 sound effects, I'd need 10 user clicks to get control of all of them, which is absurd!
Absurb, but you have to see it from iPhone or any mobile phone's point of view. It is a mobile phone going over a cellular network with bandwidth limitations, which many people know about from the recent Sprint commercial. They do not want users going over their bandwidth limit because some site is sending their phone a large amount of data without them taking action themselves.
The following is an excerpt from the official Safari Developer Library with more details.
User Control of Downloads Over Cellular Networks
In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled. No data is loaded until the user initiates it.
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play" onClick="document.myMovie.play()">
This does nothing on iOS: <body onLoad="document.myMovie.play()">
Due to Apple, they have restricted the auto-play features to prevent cell data charges. In xcode4 i added a workaround though. In your "webViewDidFinishLoad" Send a javascript call to auto play the video and it works. I tried this in the html file with regular javascript but it did not work. Doing it through webViewDidFinishLoad did the trick though. In this example i want to auto play the video on my index.html page. I have a javascript function on that page called startVideo().
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSURLRequest* request = [webView request];
NSString *page = [request.URL lastPathComponent];
if ([page isEqualToString:#"index.html"]){
NSString *js = #"startVideo();";
[myWebMain stringByEvaluatingJavaScriptFromString:js];
}
}
And here's my javascript function:
<script>
function startVideo(){
var pElement3 = document.getElementById('myVideo');
pElement3.play();
}
</script>
And here's the html in case you're new to html video
<video id="myVideo" poster="index_poster.png" width="1024" height="768" xcontrols autoplay="autoplay">
<source src="flow.m4v" type="video/mp4"/>
browser not supports the video
</video>
Have you tried something like this??
function clickedOnce(){
$('audio').each(function(){
this.play();
});
}
Firefox intentionally doesn't always autobuffer / preload a web video's full data. Their thinking is that it may not even be played. Unfortunately, this screws up my app.
How can I force the full video content to download in forefox, as it does in chrome? I need the event to occur, and I need to detect it without a false-positive.