TCU BO ccncson
MULTIMEDIA IN THE WEB
brovisers; often they have no suppor at all in older browsers, Together thse factors make it
difficult to deliver audio and video that’s consistently playable for all of your vistors
The addition of the
and tags in HTMLS makes the process of delivering
and playing video and audio more straightforward. Playing multimedia will get easier over
time as newer browsers support the tags and people upgrade their older browsers
Traditionally, developers and.designers have most ‘commonly set up pages to play video and
audio on the Web using Adobe Flash. Sites such as YouTube (http:/www.youtube.cam)
embed video inside of a Flash file. This requires thatthe end user has the Adobe Flash player
installed,
The HTMLS specification introduces an alternative to that: a standard tag, , which
enables the playing of video content, However, the tag still requires a video fileand
also requires end users to have an appropriate player installed on their-computers. For aio
clips, the traditional delivery method has been to use the or tag to embed a
clip on a page. HTMLS provides the tag to do this instead, :
AS of this writing, the and tags have limited support in Web browses,
Adding to the complexity is the need to support multiple formats for video, depending on
what your visitor's browser can play,
Browsers that don’t support these tags ignore them, but if you want to deliver your audio or
video to a full range of browsers—new and old, you'll need to be able to do it without the we
of these tags. This chapter shows both the old and new methods.
Embedding Video File
The basic form of Video tag looks is as follows:
‘filename.extention" >
tag that make it more configurable for your nosis
and the needs of your audience. The atttibutes include;
¥ Autoplay — autoplay attribute makes the video automatically play when the page is
loaded,
Y Controls this determines whether a default set of playback controls should be visible
within the browser. This attribute allow user'to play, pause, stop etc the video without
reloading the entire page.
Jd
~y
ie
Scanned with CamScanner *
rs nae
—
‘ATBU_DNS_CS242_2019/2020
Y Loop ~ loop attribute tells the browser to restart the video immediately when it's
finished playing
Y Preload - The preload attribute tells the browser to begin downloading the video
immediately when the clement is encountered. If the video is the central theme ofthe
page, and it’s likely that all (or most) visitors wall want to watch the video, then it’s a
200d idea to use the preload option. However, if the video element is a small part of
the page and visitors aren't likely to watch it, then preloading the video is just a waste
of bandwidth
Y Width
Y Height
. Incorporating Audio on Web Page
Like the tag, the tag supports multiple sources. With no common format,
you'll need to encode the audio multiple times to try to get the audio out to the widest
” possible audience. Also like the tag, the tag supports attributes such as
controls, autoplay, loop, and preload, Therefore, the syntax for the tag is essentially
the same as the syntax for the tag.
Take a look at the following interface where audio player was inserted on the page using
audio tag.
ehead>
Eielesthe jquery Exanplec/titie>
aorcene/javaserspt: sece"/Jquery/jquery-2.3.2.ain.js"9
‘text/Javascript" languages" javascript">
cument).ready(funetion()
5S cocecamcne,weieeCcHEls0, this 45 JQuery DENO");
s("Hbtna").click(funetion() { :
alert("Hi, You clicked Button 11");
Ds .
ys
.
CBee eypeetsubmic” ide"vtns” values"Button 2">
Example 6: This example shows how form data ean be retrieved when submit button is
clicked, how to clear the form data.
1
~
Scanned with CamScanner ATBU_OMS_¢5212 2019/25
!
citlestale setitio
script typee"ext/ javascript” srce"/Jquery/ jquery
Seripe typec"tert/Janscegt” lonpusdet eee se an rleetety |
S(document).ready(function() “
S(*asubeit_btn") clck(function() ( |
var user_nane © $("tusertiaze").val(); |
var pass_word = $("tpasshore").val(); |
var vs “Usernane"ouser-nose » "Pstivordi"4pess words
alert(v); 7
di:
S("#reset_btn").click(function() {
wae Gber_pane = d¢rnasertioe!
var pesscvord = S¢capasanors®
| Eceeierd «Freee |
van");
wal);
ns
Ds
| e
|
‘foray |
“text” See"useriiace”scbr>
|
| -
ASYNCHRONOUS JAVASCRIPT and XML (AJAX)
up request-is sent to server and the s
owser) then reloads in order to displey
i ve ste
Traditionally, in web applications, erver prose
request accordingly and respond, The page (br.
response.
2
ry
Scanned with CamScanner ATBU_DMS_cs212_2619/2020
technique that uses JavaScript and XM
IL call is
whenever http request is sent to sever, AJAX is used to prevent reloading of page
AJAX, which stands for Async and XML, set of techniques for
‘synchronous JavaScript and XML, i iq
X, which s if onou » is a set of techni
creating highly interactive web applications. The idea is to make what's on the Web ae to
be local by giving a rich user experience, and offeri in
; wee » and offering features that usually only appear i
Te emphasis i Ain eppliations is to update the web page, using data fetched from the
y reshing the web page in the bro. “ F
fess lines Canc india. ge rowser. The term “AJAX” was created by
AJAX uses JavaScript’s XMLHttpRequest method to exchange data with the server without
reloading the current page. AJAX technique offer the following advantages
* Itenables quick, small transactions
* Client can communicate more often with the server
* More flexible user-interfaces can be built
* Web applications can.look/act more like desktop apps
However, it has some disadvantages.
* Tough to make compatible across all browsers
+ Can be server intensive
‘Typical Ajax transaction looks like this
User triggers some event (eg, clicking a button.) which call a JavaScript function
(event handler) that will respond to the event,
Event handler code sends XMLHTTP request to server
Server replies triggering code on client
Reply handler code updates web page using server's reply. When the response arrives,
client handler does something. For example, update just a PART of the page.
Between steps 2 and 3 the web page is still usable (event is asynchronous). At no point during
the transaction does the browser open a new web page.
“The server's response can be in the following forms:
* Plain text
" Anamay
* JSON
AJAX can be used with ordinaryJavaScript and can equally be used with jQuery and eachis a
topic on its own. In fact, there are so many BOOKS written in this regard! You can explore
further please.
‘The following is an example of AJAX with plain JavaScript
13
Scanned with CamScanner ATBU_DMS_¢S212 2019/2029
[rantmi>
ceitleoajax Example
