Web Technology Experts Notes

Tuesday, 26 July 2016

Overriding The Default Text Selection Color With CSS

Question: Write CSS for change the default Text Selection to red.?

::selection {
  background: red; /* Blink/WebKit Browsers */
}
::-moz-selection {
  background: red; /* Gecko Browsers */
}

Question: Change the default Text Selection to BLUE for paragraph (p.webtechnology)?

p.webtechnology::selection {
  background: blue; /* Blink/WebKit Browsers */
}
p.webtechnology::-moz-selection {
  background: blue; /* Gecko Browsers */
}

See Demo Below

Blue Color On Selection

Question: Change the default Text Selection to RED for paragraph (p.redcolor)?

p.redcolor::selection {
  background: red; /* Blink/WebKit Browsers */
}
p.redcolor::-moz-selection {
  background: red; /* Gecko Browsers */
}

See Demo Below

Red Color Selection

Monday, 25 July 2016

How to add Subtitles, Caption, Chapters and Descriptions in jwplayer video

Question: What is Subtitles, Captions, Chapters and Descriptions?
Subtitles: Translation of the dialogue like movie subtitles.
Captions: Similar to Subtitles but may include sound effects.
Chapters: Display the marker in video player bar to help the user for navigation.
Descriptions Or thumbnails: Similar to Subtitles but may include sound effects.

Question: How to add Subtitles, Captions, Chapters and Descriptions in JwPlayer?

 
<script src="//content.jwplatform.com/libraries/bFyELn2w.js"></script>
<div id="videoPlayerId2">
</div>
<script type="text/javascript">
    var playerObj = jwplayer("videoPlayerId2"); 
    playerObj.setup({
        image: "//content.jwplatform.com/thumbs/q1fx20VZ-640.jpg",
        file: "//content.jwplatform.com/videos/q1fx20VZ-640.mp4",
        tracks: [            
            
            /* subtitle **/
            {file: '//content.jwplatform.com/tracks/XtwSLSdq.txt',kind: 'subtitles'},
            
            /* captions **/
            {file: '//content.jwplatform.com/tracks/XtwSLSdq.txt',kind: 'captions'},
            
            /* Chapters **/
            {file: '//content.jwplatform.com/tracks/XtwSLSdq.txt',kind: 'chapters'},
            
            /* Descriptions **/
            { file: "//content.jwplatform.com/strips/3p683El7-120.vtt", kind: "thumbnails" },
            

        ],
        width: 640,
        height: 400
    }); 
</script>

Demo

Question: Give the chapter sample file?

1
00:00:00,000 --> 00:01:42,000
Opening credits

2
00:01:42,000 --> 00:04:44,000
A dangerous quest

3
00:04:44,000 --> 00:05:50,000
The attack

4
00:05:50,000 --> 00:08:24,000
In pursuit

5
00:08:24,000 --> 00:10:13,000
Showdown in the cage

6
00:10:13,000 --> 00:12:24,000
Eye to eye

7
00:12:24,000 --> 00:14:48,000
Ending Credits

Question: Give the subtitle/captions sample file?

1
00:00:00,000 --> 00:01:42,000
Opening credits

2
00:01:42,000 --> 00:04:44,000
A dangerous quest

3
00:04:44,000 --> 00:05:50,000
The attack

4
00:05:50,000 --> 00:08:24,000
In pursuit

5
00:08:24,000 --> 00:10:13,000
Showdown in the cage

6
00:10:13,000 --> 00:12:24,000
Eye to eye

7
00:12:24,000 --> 00:14:48,000
Ending Credits

Question: Give the Descriptions sample file?

00:00.000 --> 00:51.833
3p683El7-120.jpg#xywh=0,0,120,67

00:51.833 --> 01:43.667
3p683El7-120.jpg#xywh=120,0,120,67

01:43.667 --> 02:35.500
3p683El7-120.jpg#xywh=240,0,120,67

02:35.500 --> 03:27.334
3p683El7-120.jpg#xywh=360,0,120,67

03:27.334 --> 04:19.167
3p683El7-120.jpg#xywh=0,67,120,67

04:19.167 --> 05:11.001
3p683El7-120.jpg#xywh=120,67,120,67

05:11.001 --> 06:02.834
3p683El7-120.jpg#xywh=240,67,120,67

06:02.834 --> 06:54.668
3p683El7-120.jpg#xywh=360,67,120,67

Here 3p683El7-120.jpg is image path, placed parallel with vtt file.