Click here to close now.

Welcome!

Java Authors: Pat Romanski, Liz McMillan, Elizabeth White, Carmen Gonzalez, Dan Ristic

Related Topics: AJAX & REA, Web 2.0

AJAX & REA: Blog Post

HTML5: Media in a Flash...Without Flash!

Part Two of a 4-part primer to HTML5 development

Welcome to part two of the four part primer to HTML5 development. In this article, I will showcase some of the additions to the HTML5 tag library that we can leverage to make media-rich websites and web applications in the blink of an eye without Flash or other 3rd-party code.

HTML5-Compatible Web-Browsers
HTML5-Compatible WebBrowsers

The <AUDIO> tag:

The first tag we will look at is the <AUDIO> tag.  This new tag allows us to embed audio content in a variety of formats that the browsers will understand.  As of now the browser file format support is somewhat spotty, so it’s worth checking the chart at w3c.org and enabling multiple file formats inside the audio tag.

Lets do a quick example of the <audio> tag:


<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

Before we had to embed a player application, then have some javascript load the object into the player, and finally, the player would play the music for us.  With HTML5 compatible browsers, we just load a new audio object with controls.

The control GUI isn’t standardized, so you may see some issues in formatting when you view with diffrent browsers, but on the whole this process is much easier.

If you wanted to have the audio play automatically, loop, or do something when it is buffering you can do that quite easily.


<audio src=”song.ogg” autoplay loop>Your browser does not support audio tags</audio>

You’ll note that there are no = signs or quotes — we don’t need them anymore! HTML5 eliminates the need for boolean attributes to have = or “”‘s. Simply put the name of the desired boolean property and it will be interpreted by the browser as being set to true. We’ll discuss this syntax change at length in the next article.

Below is the table of currently supported audio formats and the browser support for each:

Format IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis No Yes Yes Yes No
MP3 No No No Yes Yes
Wav No Yes Yes No Yes

According to this chart from W3C (link here, we will need at least two file formats of our audio file in order to cover all major browsers.  For the example I chose Ogg and Wav formats.


<audio loop autoplay>Your browser does not support audio tags.
<source src="song.ogg" type="audio/ogg" />

<source src="song.wav" type="audio/mpeg" />

</audio>

This will allow the browsers to select the correct file type it needs with only two additional lines of code!

The <VIDEO> tag:


<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>

We can see that the formatting is exactly the same as the audio tag.  Like audio, we can also define multiple file sources in order to supply the correct format.  All major web browsers support Ogg video and/or MP4.


<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />

You’ll probably need to do alot more than just display some video with some controls, though.  This is where the new HTML5 events come in.  Try a few of the selections below with some javascript at the w3c website here http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_simple

oncanplaythrough — play the element as soon as it is buffered.
oncanplay — play when able, even if it might have to stop for buffering.
preload — buffer the element and wait for play.
autoplay — Play as soon as page loads, don’t wait for buffering
onend — do something when the element is done (like play the next video in a set)
onemptied — do something if the buffer is used up and no more buffer remains (like from disconnections)
onerror — pretty self-explanitory.  Do something if any errors in playing the element are encountered

A full list of HTML5 events can be viewed here: http://www.w3schools.com/html5/html5_ref_eventattributes.asp

The <object> Tag:

The <object> tag takes over the loading of applications into the web browser from the <applet> tag.  It makes it easier for both programmers and machines alike to read HTML markup and determine the values and settings being passed into the loaded application.  Take this example of an embedded object:


<object classid="xxxxxxxx-xxxxxx" id="example">
<param name="code" value="test.class" />
<param name="test2" value="testing" />
<param name="fname" value="Alan" />
<param name="lname" value="Jenner" />
</object>

<object> tags have multiple ways to declare the source of the target application or plugin: URLs and windows registry items with the “classid” option, or three other src-related attributes. It doesn’t matter which you use as long as you follow this style:


<param name=”[code/src/data]” value=”[URL]”>

You can define code, src, data, or any of the other parameters in the <object> tag itself or within <param> elements.

What's with the weird tags?

You may be asking at this point why the <object> tag is structured this way.  It’s structured with these extra tags to make it easier for machines to read the code in websites, something that will be needed for the semantic web, a revolution in how the web works similar to web 2.0.

Tim Berners-Lee (the creator of the World Wide Web) defines the semantic web thusly:

I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A ‘Semantic Web’, which should make this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The ‘intelligent agents’ people have touted for ages will finally materialize.

In the next article, I will go into the semantic web in depth and show examples of the syntactical changes from HTML4 to HTML5 that will facilitate the development of the semantic web.

Read the original blog entry...

More Stories By Bryan Halfpap

Bryan Halfpap is an Engineering Intern II at ARINC.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
SYS-CON Events announced today that Cisco, the worldwide leader in IT that transforms how people connect, communicate and collaborate, has been named “Gold Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Cisco makes amazing things happen by connecting the unconnected. Cisco has shaped the future of the Internet by becoming the worldwide leader in transforming how people connect, communicate and collaborate. Cisco and our partners are building the platform for the Internet of Everything by connecting the...
SYS-CON Events announced today that Liaison Technologies, a leading provider of data management and integration cloud services and solutions, has been named "Silver Sponsor" of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York, NY. Liaison Technologies is a recognized market leader in providing cloud-enabled data integration and data management solutions to break down complex information barriers, enabling enterprises to make smarter decisions, faster.
SYS-CON Events announced today that Windstream, a leading provider of advanced network and cloud communications, has been named “Silver Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9–11, 2015, at the Javits Center in New York, NY. Windstream (Nasdaq: WIN), a FORTUNE 500 and S&P 500 company, is a leading provider of advanced network communications, including cloud computing and managed services, to businesses nationwide. The company also offers broadband, phone and digital TV services to consumers primarily in rural areas.
SYS-CON Events announced today that Ciqada will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Ciqada™ makes it easy to connect your products to the Internet. By integrating key components - hardware, servers, dashboards, and mobile apps - into an easy-to-use, configurable system, your products can quickly and securely join the internet of things. With remote monitoring, control, and alert messaging capability, you will meet your customers' needs of tomorrow - today! Ciqada. Let your products take flight. For more inform...
SYS-CON Events announced today that GENBAND, a leading developer of real time communications software solutions, has been named “Silver Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. The GENBAND team will be on hand to demonstrate their newest product, Kandy. Kandy is a communications Platform-as-a-Service (PaaS) that enables companies to seamlessly integrate more human communications into their Web and mobile applications - creating more engaging experiences for their customers and boosting collaboration and productiv...
SYS-CON Events announced today that Dyn, the worldwide leader in Internet Performance, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Dyn is a cloud-based Internet Performance company. Dyn helps companies monitor, control, and optimize online infrastructure for an exceptional end-user experience. Through a world-class network and unrivaled, objective intelligence into Internet conditions, Dyn ensures traffic gets delivered faster, safer, and more reliably than ever.
SYS-CON Events announced today that Open Data Centers (ODC), a carrier-neutral colocation provider, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. Open Data Centers is a carrier-neutral data center operator in New Jersey and New York City offering alternative connectivity options for carriers, service providers and enterprise customers.
SYS-CON Events announced today that On the Avenue Marketing Group, a sales and marketing firm that utilizes events to market and sell products to consumers, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. On the Avenue Marketing Group (OTA) is a sales and marketing firm that utilizes events to market and sell products to consumers. On behalf of our clients, we attend thousands of fairs, festivals, expos, concerts, conferences, and sporting events annually, helping them reach millions of individuals ...
SYS-CON Events announced today that BroadSoft, the leading global provider of Unified Communications and Collaboration (UCC) services to operators worldwide, has been named “Gold Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. BroadSoft is the leading provider of software and services that enable mobile, fixed-line and cable service providers to offer Unified Communications over their Internet Protocol networks. The Company’s core communications platform enables the delivery of a range of enterprise and consumer calling...
SYS-CON Events announced today that ActiveState, the leading independent Cloud Foundry and Docker-based PaaS provider, has been named “Silver Sponsor” of SYS-CON's DevOps Summit New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. ActiveState believes that enterprises gain a competitive advantage when they are able to quickly create, deploy and efficiently manage software solutions that immediately create business value, but they face many challenges that prevent them from doing so. The Company is uniquely positioned to help address these challenges thro...
SYS-CON Events announced today that Vitria Technology, Inc. will exhibit at SYS-CON’s @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Vitria will showcase the company’s new IoT Analytics Platform through live demonstrations at booth #330. Vitria’s IoT Analytics Platform, fully integrated and powered by an operational intelligence engine, enables customers to rapidly build and operationalize advanced analytics to deliver timely business outcomes for use cases across the industrial, enterprise, and consumer segments.
SYS-CON Events announced today that Alert Logic, the leading provider of Security-as-a-Service solutions for the cloud, has been named “Bronze Sponsor” of SYS-CON's 16th International Cloud Expo® and DevOps Summit 2015 New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY, and the 17th International Cloud Expo® and DevOps Summit 2015 Silicon Valley, which will take place November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that Akana, formerly SOA Software, has been named “Bronze Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. Akana’s comprehensive suite of API Management, API Security, Integrated SOA Governance, and Cloud Integration solutions helps businesses accelerate digital transformation by securely extending their reach across multiple channels – mobile, cloud and Internet of Things. Akana enables enterprises to share data as APIs, connect and integrate applications, drive part...
SYS-CON Events announced today that CommVault has been named “Bronze Sponsor” of SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY, and the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. A singular vision – a belief in a better way to address current and future data management needs – guides CommVault in the development of Singular Information Management® solutions for high-performance data protection, universal availability and sim...
SYS-CON Events announced today that SafeLogic has been named “Bag Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which will take place June 9-11, 2015, at the Javits Center in New York City, NY. SafeLogic provides security products for applications in mobile and server/appliance environments. SafeLogic’s flagship product CryptoComply is a FIPS 140-2 validated cryptographic engine designed to secure data on servers, workstations, appliances, mobile devices, and in the Cloud.
SYS-CON Events announced today that StorPool Storage will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. StorPool is distributed storage software that allows service providers, enterprises and other cloud builders to run data storage on standard x86 servers, instead of using expensive and inefficient storage arrays (SAN).
SYS-CON Events announced today that Site24x7, the cloud infrastructure monitoring service, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Site24x7 is a cloud infrastructure monitoring service that helps monitor the uptime and performance of websites, online applications, servers, mobile websites and custom APIs. The monitoring is done from 50+ locations across the world and from various wireless carriers, thus providing a global perspective of the end-user experience. Site24x7 supports monitoring H...
SYS-CON Events announced today that Intelligent Systems Services will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Established in 1994, Intelligent Systems Services Inc. is located near Washington, DC, with representatives and partners nationwide. ISS’s well-established track record is based on the continuous pursuit of excellence in designing, implementing and supporting nationwide clients’ mission-critical systems. ISS has completed many successful projects in Healthcare, Commercial, Manufacturing, ...
SYS-CON Events announced today that B2Cloud, a provider of enterprise resource planning software, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. B2cloud develops the software you need. They have the ideal tools to help you work with your clients. B2Cloud’s main solutions include AGIS – ERP, CLOHC, AGIS – Invoice, and IZUM
The IoT Bootcamp is coming to Cloud Expo | @ThingsExpo on June 9-10 at the Javits Center in New York. Instructor. Registration is now available at http://iotbootcamp.sys-con.com/ Instructor Janakiram MSV previously taught the famously successful Multi-Cloud Bootcamp at Cloud Expo | @ThingsExpo in November in Santa Clara. Now he is expanding the focus to Janakiram is the founder and CTO of Get Cloud Ready Consulting, a niche Cloud Migration and Cloud Operations firm that recently got acquired by Aditi Technologies. He is a Microsoft Regional Director for Hyderabad, India, and one of the f...