I want to embed a video in a simple, largely JavaScript-free web page. But I have two versions, one at 1920x1080 and one at 960x540. Ideally, the latter should be used in a smaller embedded window to save the user download, but the former if they go full screen on a PC.
I was expecting to see something on the <Source> element, but could not find it. I would think that it is a very common requirement.
Is there a fairly easy way to do this? Or do we just make the user always use the big file?
(One option is to put the small one inline, and then put a direct link to the full video after it, if the user clicks the latter they get the full resolution.)
The video contains a lot of text, so the larger one does look better full screen. It is twice as large though. (Handbrake compressed at 30 quality.)
If there was some widely used JavaScript control that would be good. But I do not want to have a dependency on a large framework such as React or Angular. This is essentially a static web page.
There are no media queries available for the video tag. You're stuck with JS or HLS streaming to create responsive video on the web.
Here's a simple JS example that will do what you are looking for.
<div id="video"> </div>
<script>
//get screen width and pixel ratio
var width = screen.width;
var smallVideo= <smallvideo>;
var bigVideo = <bigVideo>;
if (width<500){
console.log("this is a very small screen, no video will be requested");
}
else if (width< 1400){
console.log("let’s call this mobile sized");
var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +smallVideo +"\"/\>";
document.getElementById('video').innerHTML = videoTag;
}
else{
var videoTag = "\<video preload=\"auto\" width=\"100%\" autoplay muted controls src=\"" +bigVideo +"\"/\>";
document.getElementById('video').innerHTML = videoTag;
}
</script>
What is the "Source" you expect?
I'm not sure but maybe you can handle it by javascript.
In html, just show that former video, then when user interact with this, you can redircet to latter video.
Related
Is it possible to get srcset to recalculate the browser window size once the page has loaded, and thus update the image its using.
The reason you'd want to do this is because if on a desktop you have your browser window compressed, load a site, then make the browser window bigger, it will just scale the "small.jpg" (as set in the srcset) so the user will end up with a pixilated image.
I started make a jsfiddle to show the issue, but it dosnt work well, as i think srcset is calculated by the browser window, rather than the jsfiddle results grid.
If you are interested you can copy and paste below this into a blank html file and run it in a localserver (must be on a local http:// server so you can view the network debugging tab to see which image the browser has loaded). Running it in the browser via the file url using file:/// wont allow you to see which image is loaded via the network debugging tab.
<body>
<div class="wrapper">
<img
src="http://i.imgur.com/DoWeH0X.jpg?1"
srcset="http://i.imgur.com/QV9vace.jpg?1 1400w, http://i.imgur.com/ZqkR6Bk.jpg?1 800w, http://i.imgur.com/gltBZ06.jpg?1 300w"
alt="#"
>
</body>
</html>
You can use
var img = document.getElementById('resizeMe');
window.onresize = function() {
img.outerHTML = img.outerHTML;
}
Which will cause the HTML to be sent through the parser again, causing the browser to reload the image according to the srcset.
Of course you should probably include some logic to detect if the screen size has changed to a size outside of the current range so the image isn't reloaded every single time the user resizes the window slightly.
Or, you could clone the node, insert it before the current node, then remove the old node.
var img = document.getElementById('resizeMe');
window.onresize = function() {
var clone = img.cloneNode(true);
img.parentNode.insertBefore(clone, img);
img.remove();
}
Which will also cause the parse to re-render the html, but will consume more resources.
i found this to force a re-render
var img = document.getElementById('my-element');
img.srcset = img.srcset;
I am wondering how I make get an audio file to play 'continuously' on all pages. So if the audio file has played for 20 seconds, then when navigating on another page it will continue from where it left off. I also am trying to get the volume to decrease after navigating away from my home page. Any tips or advice would me appreciated! Thanks =D
<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
Yes, it is possible. try this:
<audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
if(!played){
if(tillPlayed){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,1000);
</script>
If you really navigate to another page, then you will not get really continuous playback.
There are three common approaches:
open your audio player in a popup
frames: one main frame for your page to display in, a small frame for the audio player
not really navigating to other pages, but do everything with AJAX and thereby not actually reloading the page, but only changing parts of the document structure dynamically; maybe adding real link functionality including changing the address bar by using the HTML5 History API
All approaches have their pros/cons. Popup is maybe the easiest to implement, and has the least drawbacks (compared to frames).
I also am trying to get the volume to decrease after navigating away from my home page.
Then catch any clicks on your “home” link/button, and call the volume method of the audio element with a parameter value ranging from 0 to 1 to set the volume.
well .. a clean and neat way to do it , is the way that soundcloud.com and spoify.com made through ajaxifing all the pages
fix a page and change the pages content through ajax ,and change the url as well to give the user the illusion of navigating
this is not the easiest or fastest solution ,but it's the cleanest one ..far away from the fear of browsers incompatibilities
On my site, I have a static-width embedded chromeless YouTube player (iframe) that plays a video selected by the user. It's working well, but there's one little annoyance: its height does not respond to the video; cinematic ultra-widescreen videos have horizontal black bars and old-style 4:3 videos have vertical black bars.
Is there a reasonably simple solution that will make the player adjust its height according to the video it's playing? All Google reveals are scripts for fluid-layout sites (which mine is not). Javascript, Coffeescript, and Jquery solutions are all acceptable.
In order to achieve your expected behavior, you need to know the video's aspect ratio. You can do that quite easily using the API YouTube provides. First, to grab the video info in JSON format, you GET a URL of this form:
https://gdata.youtube.com/feeds/api/videos/video_id?v=2&prettyprint=true&alt=json
Where video_id is the ID of the video you're embedding (note that "prettyprint" just makes it human-readable -- remove it in the actual application to save bandwidth). The property that we care about is entry.media$group.yt$aspectRatio.$t. That property is set to "widescreen" when the video is 16:9, and it isn't defined if it's 4:3. Thus, you can easily check for that value and resize your <iframe> accordingly.
Here's an example:
HTML:
<iframe id = "vid" width="500" src="http://www.youtube.com/embed/ni9RS4pgRXA" frameborder="0" allowfullscreen></iframe>
(Width here is 500 -- it can be, of course, anything you want).
JavaScript (uses jQuery, but it isn't necessary):
$.getJSON("https://gdata.youtube.com/feeds/api/videos/ni9RS4pgRXA?v=2&alt=json",
function(data) {
var obj = $("#vid");
var asp = data.entry.media$group.yt$aspectRatio.$t;
console.log("Aspect Ratio is", asp); //Debugging line. "undefined" if video is 4:3.
if(asp == "widescreen") {
obj.height((Math.floor(obj.width() * 9 / 16)));
}
else {
obj.height((Math.floor(obj.width() * 3 / 4)));
}
});
Here (link) you can find a working demo with an example 16:9 video. The Javascript code is pretty straight-forward, but in case anything is vague, please tell me so that I can explain in more detail.
Three part question...
I'm using http://syddev.com/jquery.videoBG/index.html for HTML 5 video background on my site. Works perfectly! However I have some additional functions I want to add on but not quite sure how to pull it off.
1_ I would like to add a button to mute/unmute audio. I'm not that great at jquery so what I'm looking for is what I need to add to the existing code to make it happen and what I need to put in the place where I want the actual button to go. I'm guessing I need to add some mute option to...
$('.bg').videoBG({
position:"fixed",
zIndex:0,
mp4:'_video/ClimbBG.mp4',
ogv:'_video/ClimbBG.ogv',
webm:'_video/ClimbBG.webm',
poster:'_images/ClimbBG.jpg',
opacity:1,
fullscreen:true,
});
Then some function/code in the spot I want the button to be?
2_ I would like to have a different random video load each time the site is loaded. Maybe even have a new video play after the first one is finished?
Example...This site loads a different video when the page is refreshed ( cabin-time.com )
3_ Not super important but I've noticed a lot of people who use video backgrounds have little dots in the video (cabin-time.con is one example). I'm guessing this is to reduce file size? Most likely done in Final Cut? How do I add this into my video and does it really reduce file size?
Thanks!!!
Unfortunately, VideoBG does not support mute, so you can't just 'add mute option' to it, you'll need to make it yourself.
Here are some points to get you started, edit the videoBG.js, to add a 'muted' attribute ( http://syddev.com/jquery.videoBG/jquery.videoBG.js )
......
// video element
var $video = $('<video/>');
$video.css('position','absolute')
.css('z-index',options.zIndex)
.attr('poster',options.poster)
.attr('muted',options.muted)
.css('top',0)
.css('left',0)
.css('min-width','100%')
.css('min-height','100%');
.......
// these are the defaults
$.fn.videoBG.defaults = {
mp4:'',
ogv:'',
webm:'',
poster:'',
autoplay:true,
loop:5,
sclae:false,
position:"absolute",
opacity:1,
textReplacement:false,
zIndex:0,
width:0,
height:0,
muted:false
Now you can add muted:true to your properties
Does anyone know if html5 video allows objects like buttons, menu, etc connected to the timeline?
Youtube flash player do this: in specific moment, show an object (banner, links, comments) over the video for defined seconds.
thanks
Yes and no,
It's possible to create very interactive video-based presentations using html5 video objects however it requires a lot more than just the video object itself. You can nest video into a canvas object then mess with the actual video image frames, you can overlay any visual html element on top of the video object itself then animate these, you can control the video playback with buttons, click events etc. You can even have the video object control the rest of the page with time-based listeners.
Popcorn.js is really really good and easy to learn, allowing you to do all of what you mentioned.
http://popcornjs.org
http://popcornjs.org/demos
It's not part of the HTML5 video standard, but it's easy to implement manually by wiring up some scripting to the progress event. By looking at the currentTime property of the video object you can decide when to show/hide additional elements.
eg showing an element on top of a video between 1 and 2 seconds into a video:
<video id="v">...</div>
<div id="overlay" style="position: relative; top: -80px;">HELLO</div>
<script type="text/javascript">
var overlay= document.getElementById('overlay');
var video= document.getElementById('v');
video.addEventListener('progress', function() {
var show= video.currentTime>=1 && video.currentTime<2;
overlay.style.visibility= show? 'visible' : 'hidden';
}, false);
</script>
X2TV (www.x2.tv) has a drag and drop studio where you can overlay icons and additional content within the HTML5 layer.
In case you woul like to use a more generic framework https://github.com/nise/vi-two could be interesting for you.