Click here to close now.

Welcome!

Search Authors: Elizabeth White, Carmen Gonzalez, Cloud Best Practices Network, AppDynamics Blog, Liz McMillan

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
The cloud is now a fact of life but generating recurring revenues that are driven by solutions and services on a consumption model have been hard to implement, until now. In their session at 16th Cloud Expo, Ermanno Bonifazi, CEO & Founder of Solgenia, and Ian Khan, Global Strategic Positioning & Brand Manager at Solgenia, will discuss how a top European telco has leveraged the innovative recurring revenue generating capability of the consumption cloud to enable a unique cloud monetization model to drive results.
As organizations shift toward IT-as-a-service models, the need for managing and protecting data residing across physical, virtual, and now cloud environments grows with it. CommVault can ensure protection &E-Discovery of your data – whether in a private cloud, a Service Provider delivered public cloud, or a hybrid cloud environment – across the heterogeneous enterprise. In his session at 16th Cloud Expo, Randy De Meno, Chief Technologist - Windows Products and Microsoft Partnerships, will discuss how to cut costs, scale easily, and unleash insight with CommVault Simpana software, the only si...
Analytics is the foundation of smart data and now, with the ability to run Hadoop directly on smart storage systems like Cloudian HyperStore, enterprises will gain huge business advantages in terms of scalability, efficiency and cost savings as they move closer to realizing the potential of the Internet of Things. In his session at 16th Cloud Expo, Paul Turner, technology evangelist and CMO at Cloudian, Inc., will discuss the revolutionary notion that the storage world is transitioning from mere Big Data to smart data. He will argue that today’s hybrid cloud storage solutions, with commodity...
Cloud data governance was previously an avoided function when cloud deployments were relatively small. With the rapid adoption in public cloud – both rogue and sanctioned, it’s not uncommon to find regulated data dumped into public cloud and unprotected. This is why enterprises and cloud providers alike need to embrace a cloud data governance function and map policies, processes and technology controls accordingly. In her session at 15th Cloud Expo, Evelyn de Souza, Data Privacy and Compliance Strategy Leader at Cisco Systems, will focus on how to set up a cloud data governance program and s...
Roberto Medrano, Executive Vice President at SOA Software, had reached 30,000 page views on his home page - http://RobertoMedrano.SYS-CON.com/ - on the SYS-CON family of online magazines, which includes Cloud Computing Journal, Internet of Things Journal, Big Data Journal, and SOA World Magazine. He is a recognized executive in the information technology fields of SOA, internet security, governance, and compliance. He has extensive experience with both start-ups and large companies, having been involved at the beginning of four IT industries: EDA, Open Systems, Computer Security and now SOA.
The industrial software market has treated data with the mentality of “collect everything now, worry about how to use it later.” We now find ourselves buried in data, with the pervasive connectivity of the (Industrial) Internet of Things only piling on more numbers. There’s too much data and not enough information. In his session at @ThingsExpo, Bob Gates, Global Marketing Director, GE’s Intelligent Platforms business, to discuss how realizing the power of IoT, software developers are now focused on understanding how industrial data can create intelligence for industrial operations. Imagine ...
We certainly live in interesting technological times. And no more interesting than the current competing IoT standards for connectivity. Various standards bodies, approaches, and ecosystems are vying for mindshare and positioning for a competitive edge. It is clear that when the dust settles, we will have new protocols, evolved protocols, that will change the way we interact with devices and infrastructure. We will also have evolved web protocols, like HTTP/2, that will be changing the very core of our infrastructures. At the same time, we have old approaches made new again like micro-services...
Every innovation or invention was originally a daydream. You like to imagine a “what-if” scenario. And with all the attention being paid to the so-called Internet of Things (IoT) you don’t have to stretch the imagination too much to see how this may impact commercial and homeowners insurance. We’re beyond the point of accepting this as a leap of faith. The groundwork is laid. Now it’s just a matter of time. We can thank the inventors of smart thermostats for developing a practical business application that everyone can relate to. Gone are the salad days of smart home apps, the early chalkb...
Operational Hadoop and the Lambda Architecture for Streaming Data Apache Hadoop is emerging as a distributed platform for handling large and fast incoming streams of data. Predictive maintenance, supply chain optimization, and Internet-of-Things analysis are examples where Hadoop provides the scalable storage, processing, and analytics platform to gain meaningful insights from granular data that is typically only valuable from a large-scale, aggregate view. One architecture useful for capturing and analyzing streaming data is the Lambda Architecture, representing a model of how to analyze rea...
Today’s enterprise is being driven by disruptive competitive and human capital requirements to provide enterprise application access through not only desktops, but also mobile devices. To retrofit existing programs across all these devices using traditional programming methods is very costly and time consuming – often prohibitively so. In his session at @ThingsExpo, Jesse Shiah, CEO, President, and Co-Founder of AgilePoint Inc., discussed how you can create applications that run on all mobile devices as well as laptops and desktops using a visual drag-and-drop application – and eForms-buildi...
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.
Containers and microservices have become topics of intense interest throughout the cloud developer and enterprise IT communities. Accordingly, attendees at the upcoming 16th Cloud Expo at the Javits Center in New York June 9-11 will find fresh new content in a new track called PaaS | Containers & Microservices Containers are not being considered for the first time by the cloud community, but a current era of re-consideration has pushed them to the top of the cloud agenda. With the launch of Docker's initial release in March of 2013, interest was revved up several notches. Then late last...
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.
In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect at GE, and Ibrahim Gokcen, who leads GE's advanced IoT analytics, focused on the Internet of Things / Industrial Internet and how to make it operational for business end-users. Learn about the challenges posed by machine and sensor data and how to marry it with enterprise data. They also discussed the tips and tricks to provide the Industrial Internet as an end-user consumable service using Big Data Analytics and Industrial Cloud.
Performance is the intersection of power, agility, control, and choice. If you value performance, and more specifically consistent performance, you need to look beyond simple virtualized compute. Many factors need to be considered to create a truly performant environment. In his General Session at 15th Cloud Expo, Harold Hannon, Sr. Software Architect at SoftLayer, discussed how to take advantage of a multitude of compute options and platform features to make cloud the cornerstone of your online presence.
The explosion of connected devices / sensors is creating an ever-expanding set of new and valuable data. In parallel the emerging capability of Big Data technologies to store, access, analyze, and react to this data is producing changes in business models under the umbrella of the Internet of Things (IoT). In particular within the Insurance industry, IoT appears positioned to enable deep changes by altering relationships between insurers, distributors, and the insured. In his session at @ThingsExpo, Michael Sick, a Senior Manager and Big Data Architect within Ernst and Young's Financial Servi...
Even as cloud and managed services grow increasingly central to business strategy and performance, challenges remain. The biggest sticking point for companies seeking to capitalize on the cloud is data security. Keeping data safe is an issue in any computing environment, and it has been a focus since the earliest days of the cloud revolution. Understandably so: a lot can go wrong when you allow valuable information to live outside the firewall. Recent revelations about government snooping, along with a steady stream of well-publicized data breaches, only add to the uncertainty
The explosion of connected devices / sensors is creating an ever-expanding set of new and valuable data. In parallel the emerging capability of Big Data technologies to store, access, analyze, and react to this data is producing changes in business models under the umbrella of the Internet of Things (IoT). In particular within the Insurance industry, IoT appears positioned to enable deep changes by altering relationships between insurers, distributors, and the insured. In his session at @ThingsExpo, Michael Sick, a Senior Manager and Big Data Architect within Ernst and Young's Financial Servi...
PubNub on Monday has announced that it is partnering with IBM to bring its sophisticated real-time data streaming and messaging capabilities to Bluemix, IBM’s cloud development platform. “Today’s app and connected devices require an always-on connection, but building a secure, scalable solution from the ground up is time consuming, resource intensive, and error-prone,” said Todd Greene, CEO of PubNub. “PubNub enables web, mobile and IoT developers building apps on IBM Bluemix to quickly add scalable realtime functionality with minimal effort and cost.”
Docker is an excellent platform for organizations interested in running microservices. It offers portability and consistency between development and production environments, quick provisioning times, and a simple way to isolate services. In his session at DevOps Summit at 16th Cloud Expo, Shannon Williams, co-founder of Rancher Labs, will walk through these and other benefits of using Docker to run microservices, and provide an overview of RancherOS, a minimalist distribution of Linux designed expressly to run Docker. He will also discuss Rancher, an orchestration and service discovery platf...