I use fullpage.js on my page. I set scrollbar:true,so i want to track scroll position on certain slide to make images load on reveal. If there's a way to use lazy load for images with transition effect on scroll?
fullPage.js provides lazy loading, check it out.
<img data-src="image.png">
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
Related
I'm using the <picture></picture> tag to responsively display an image after assessing the size of the container it's in.
Some example code:
<picture>
<source media="(max-width: 70px)" srcset="IMAGE_URL">
<source media="(min-width: 71px) and (max-width: 170px)" srcset="IMAGE_URL">
<source media="(min-width: 171px) and (max-width: 270px)" srcset="IMAGE_URL">
. . .
<img src="IMAGE_URL" alt="An image">
</picture>
However, the <source media="(MEDIA_QUERY)" ... > part in an implementation of the format above considers the width of the entire screen, rather than the container that the <picture></picture> is currently inside.
Help on this is appriciated.
There is unfortunately no standard way (yet) to base responsive behavior upon a container instead of the browser viewport.
There are community efforts around Container Queries, but nothing has yet been defined, that could eventually become a standard.
There are several JavaScript libraries, like EQCSS, trying to provide solutions, but requiring JavaScript for a presentation —hence CSS— job is often not a good idea.
You can also look at CSS Conditions, but it also requires JavaScript.
You can use srcset and specify image size:
<div class="container">
<img src="image-200.jpg"
srcset="image-100.jpg 100w, image-200.jpg 200w,
image-400.jpg 400w, image-800.jpg 800w,
image-1000.jpg 1000w, image-1400.jpg 1400w,
image-1800.jpg 1800w" />
</div>
Browser will download optimal image file.
I just started using VideoJS. Quite impressed with the ease of initial setup of the Javascript library and the clean integration of videos into web pages.
However I encountered an issue of displaying subtitles in a foreign language (e.g. Chinese). The following is the code for embedding video
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640"
height="264" poster="Image/oceans-clip.png" data-setup="{}">
<source src="Video/oceans.mp4" type='video/mp4'/>
<track kind="captions" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="captions" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
<track kind="subtitles" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
<!-- Tracks need an ending tag thanks to IE9 -->
<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 issues I have are:
1) The Chinese captions in "demo.captions_C.vtt" are not displayed, even if it is set as default. Instead, captions in "demo.captions.vtt is " are displayed.
2) I tried to select "Chinese" in the caption menu. There was no response and no change.
The "demo.captions_C.vtt" is provided below:
WEBVTT
00:00.000 --> 00:02.332
这是中文字幕
00:02.332 --> 00:10.947
海鸥的英雄礼赞音乐
00:10.947 --> 00:17.691
大海在咆哮
00:17.691 --> 00:50.279
鲸鱼在召唤
The only difference (apart from contents) I can tell between demo.captions.vtt and demo.captions_C.vtt is that the latter uses utf8 encoding, while the first one is using us-ascii.
I am wondering (a) if I have missed anything in the html code in integrating with the video tag in configuring tracks. Why only English is displayed. (b) has anyone successfully used vtt file that is using UTF-8 encoding? please let me know your procedures.
Here is a working example with Chinese subtitles:
https://jsfiddle.net/xrpnbwfz/1/
<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" data-setup='[]'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
<track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>
If you are using the latest version 4.12, there are some known issues with captions/subtitles: https://github.com/videojs/video.js/issues/1888 https://github.com/videojs/video.js/issues/1904
https://github.com/videojs/video.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+caption
![enter image description here][1]I've tree jpg to show. Here's the html:
<img id="carrossel1" class="imagemCarrossel" src="/images/home/fundo_carrossel1.jpg" />
<img id="carrossel2" class="imagemCarrossel" src="/images/home/fundo_carrossel2.jpg" />
<img id="carrossel3" class="imagemCarrossel" src="/images/home/fundo_carrossel3.jpg" />
The first one is rendered fine. The two other not.
The image folder have:
fundo_carrossel1.jpg
fundo_carrossel2.jpg
fundo_carrossel3.jpg
The 2nd and 3rd don't show up in Chrome of Firefox...
Maybe your CSS is modifying the elements resulting in a change of display behavior. Can you post the CSS you are using to further try to help?
I have a single page website which lists a collection of HTML5 audio players. The problem is the site has become slow because the following browsers start predownloading the content (mp3 and ogg)
Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)
I use the basic code to implement the players. Is there a way I can prevent the browsers from predownloading the audio files and only work when they click play?
<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
<audio controls="controls" preload="none">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Note - preload="none" - can be used with VIDEO HTML5 and AUDIO HTML5.
The preload attribute is supported in all major browsers, except Internet Explorer and Opera.
MSIE still accounts for some 30% of all web traffic, so preload="none" is only a part solution. In a few pages where I had this problem, I add a small script to my page headers:
<script type="text/javascript">
function addAudio(t) {
var l=t.innerHTML.length;
var audioName=t.parentElement.id;
if( t.children.length==0) {
t.innerHTML=t.innerHTML+' <audio controls="controls"><source src="'+
audioName+'.ogg" type="audio/ogg" /><source src="'+
audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
}
}
</script>
and then use DHMTL to dynamically add the audio tag, for example:
<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>
What this does is to define a list item containing a text span. When the person browsing clicks on the spanned text, the javascript fires and appends the <audio> tag. You could alternatively use the onmouseover attribute so that the audio tag is added on hover.
Add the preload attribute to the generated code if you wish. This is the simple approach, but if you are already using jQuery on your webpage, I note that this offers elegant alternatives.
Hi I'm trying to modify a web page so that it loads faster.
Since I have some videos embeded (blip.tv but can change it to youtube if it helps) I was wondering if you could load an image where the video should be and on click replace the image with the video and start playing (without reloading the whole page).
I think I've seen this before, but can't find it anywhere anymore!
right now the code to embed I use is:
<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>
Thanks
Quick and dirty: you could just set the embed code as a global variable somewhere:
<script type="text/javascript">
var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>
Then put the image in a container div and replace the container's innerHTML onclick:
<div id="videocontainer">
<img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>
There's a Google code project called SWFObject, which is perfect for what you need. It's a cross-browser javascript library for loading flash - and you could use it to replace your image with the flash video when someone clicks on the image, for example.