Research Paper Html5 Player

WEBINAR:
On-Demand

Full Text Search: The Key to Better Natural Language Queries for NoSQL in Node.js


Build an HTML5 Video Player

Prior to HTML5, video content could only be embedded into a web page using a plug-in such as flash. The HTML5 <video> element was a game changer that allowed the embedding of videos in a web page using native HTML markup. In today's article, we'll design a couple of players using nothing more than some standard HTML controls, CSS, and JavaScript.

Introducing the New <VIDEO> Element

The easiest way to embed a video in your web page is to include the HTML5 <video> element with the controls attribute. That adds video controls, like play, pause, and volume. It's also good idea to include width and height attributes. Otherwise, the page may flicker while the video loads. Within the <video> tags, multiple <source> elements can link to different video files. The browser will use the first recognized format. Text between the <video> tags may display a fallback message, because it will only display in browsers that do not support the <video> element:

<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

The autoplay attribute starts the video automatically once it has loaded.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg. MP4 is the only format supported by all the major browsers.

Controlling Playback via the HTMLVideoElement Interface

The HTMLMediaElement JavaScript interface exposes the properties and methods required to support basic media-related capabilities that are common to both audio and video. Hence, the HTMLVideoElement and HTMLAudioElement elements both inherit this interface.

An obvious question to ask is why do we need an API? One very good reason is that default video controls vary from browser to browser so building your own GUI is a way to make your player look consistent across all browsers. Beyond that you can do some cool things like change the video size at runtime.

<div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="makeBig()">Big</button> <button onclick="makeSmall()">Small</button> <button onclick="makeNormal()">Normal</button> <br><br> <video id="video1" width="420"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div>

The above markup includes extra buttons to play and pause the video as well as change its size. Each button's onclick event invokes a JavaScript function that achieves the desired action via the HTMLVideoElement Interface. Note that in a real web page you would probably want to use non-obtrusive JavaScript to attach the event handlers. The onclick attribute is employed here for the sake of simplicity.

var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } //the video always maintains its original aspect ratio function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; }

Want to try it out? It just happens to be the example provided by W3Schools.com.

Styling Player Controls

Binding button events to JavaScript functions is sufficient to build your own player, but it won't look very good. Take the following player:

<div id='player'> <video id='video-element'> <source src='http://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'> <source src='http://www.w3schools.com/html/mov_bbb.ogg' type='video/ogg'> </video> <div id='controls'> <progress id='progress-bar' min='0' max='100' value='0'>0% played</progress> <button id='btnReplay' class='replay' title='replay' onclick='replayVideo();'>Replay</button> <button id='btnPlayPause' class='play' title='play' onclick='playPauseVideo();'>Play</button> <button id='btnStop' class='stop' title='stop' onclick='stopVideo();'>Stop</button> <button id='btnIncreaseVolume' class='volume-plus' title='increase volume' onclick='setVolume("up");'>Increase volume</button> <button id='btnDecreaseVolume' class='volume-minus' title='decrease volume' onclick='setVolume("down");'>Decrease volume</button> <button id='btnMute' class='mute' title='mute' onclick='muteVolume();'>Mute</button> </div> </div>

Due to the large number of controls, they extend way past the video:

That's where CSS comes in. With some judicious use of CSS rules, you can make your player look as good or even better than the standard HTML5 video element:

body { font-family: Verdana, Geneva, sans-serif; background-color: lightgray; } h1 { font-size:16px; color:#333; } #player { float:left; padding:1em 1em .5em; background-color:black; border:2px solid darkgreen; border-radius: 9px; } #controls { border: 1px solid darkgreen; width: 420px; margin-left: auto; margin-right: auto; text-align: center; margin-top: 5px; padding-bottom: 3px; border-radius: 7px; } video { border:1px solid darkgreen; width:420px; height:231px; background:black; } button { text-indent:-9999px; width:16px; height:16px; border:none; cursor:pointer; background:transparent url('buttons.png') no-repeat 0 0; } .pause { background-position:-19px 0; } .stop { background-position:-38px 0; } .volume-plus { background-position:-57px 0; } .volume-minus { background-position:-76px 0; } .mute { background-position:-95px 0; } .unmute { background-position:-114px 0; } .replay { background-position:-133px 0; } progress { color: green; font-size: 12px; width: 220px; height: 16px; border: none; margin-right: 40px; background: #434343; border-radius: 9px; } progress::-moz-progress-bar { color:green; background:#434343; } progress[value]::-webkit-progress-bar { background-color: #434343; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; } progress[value]::-webkit-progress-value { background-color: green; }

Here's what the styled controls look like in a browser:

Conclusion

While we'll be getting to the JavaScript code that makes the above player work next time, here's the full working demo to tide you over.



Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses.

In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on Reverb Nation.



Times are changing in the world of online video. Flash, which dominated online video for decades, is in a terminal decline. Meanwhile, HTML5 video player options and formats are on the rise. This is great news for the security and speed of the internet, but a shakeup for an industry in the throes of exponential growth.

Are you ready for the changes coming? This article will explain some of the big changes happening around HTML5 video player formats. We’ll also cover what you can do to ensure your content remains playable in a post-Flash era.

Flash is dying; HTML5 is rising

Flash has been around for more than 20 years. During most of that time, it has been the dominant platform for video and most other multimedia on the internet. Flash is widely supported on more than 1.3 billion devices around the world. It’s been a standard in the online video distribution industry for good reason. However, Flash has some big issues. Notably, these center around security and speed.

In 2007, when the first iPhone was released, it didn’t support Flash. This was the first major computing platform to deliberately drop Flash support. The iPhone has been a trendsetter. Android followed suit in 2012, dropping support for Flash completely.

The trend has continued, expanding into web browsers. In July 2016, the popular open source web browser Firefox announced they were phasing out support for Flash. They said the move would lead to “enhanced security, improved battery life, faster page load, and better browser responsiveness.” Microsoft Edge, Apple’s Safari, and Google Chrome are all jumping on this bandwagon.

Chrome 55 drops native Flash support

Google Chrome is the most popular web browser in the world. When Chrome makes moves, it’s important to listen. Therefore, when Google announced a plan to phase out (or “de-emphasize”) Adobe Flash in 2015, it was an important step.

Chrome 53, which was released in September 2016, blocked Flash-based analytics and other background processes. In Chrome 54, YouTube support was rewritten to use HTML5 by default.

Version 55 of Chrome is taking an even bigger step. This version will default to the HTML5 video player on all websites for all content. There are, however, exceptions. The top 10 sites on the web will be exempt for one year. These sites are currently YouTube, Facebook, Yahoo, VK, Live, Yandex, OK.ru, Twitch, Amazon, and Mail.ru. Sites that fully rely on Flash will also be exempted from the Chrome 55 HTML5 default behavior.

Firefox, the second most popular browser in the world, is following a similar trend. In 2017, all Flash content will become “click to activate” in Firefox. If you make content in Flash, you should start transitioning to a different technology.

[Tweet “Beyond Chrome browser version 55, #Flash content like #videos will have only limited support. Get the lowdown:”]

Changes in Chrome 56 and beyond

Web developers and content creators must always be attuned to changes in the world of web browsing. Many of these changes are driven by evolving standards and practices adopted by web browsers. As such, it’s good to keep an eye on the future.

Chrome 56 will introduce some new changes related to HTTP. The HTTP protocol is used for loading just about every page on the web. However, it’s not a secure method of transmitting data. HTTPS is a secure version of HTTP that includes encryption. It’s been in use for years on most pages that involve transmitting passwords, banking information, or other sensitive details.

Starting with Chrome 56, HTTP content is beginning to be labeled as insecure. A prominent logo in the URL bar will warn users. For video content creators, making sure that pages are in HTTPS is a good idea. The “Not Secure” warning label may scare users away otherwise. In the short term, this is most important for login pages and payment portals.

Over the next few months, it’s not a bad idea to move all your content to HTTPS. Here at DaCast, our HTML5 video player is HTTPS compatible to make payments 100% secure. Akamai has also updated their CDN for HTTPS video delivery. This ensures maximum security and compatibility for a safer web experience.

Transition times for online video

As Wired put it, Flash must die. It’s inevitable that online video will move away from this format, and the time is now. In 2017, we expect to see Flash on its way out. This can be seen in the changes with Chrome and Firefox browsers.

Evidence of these changes can also be seen in other venues. For example, CDN support for Flash video encoded using Adobe’s RTMP standard is gradually declining. It’s still commonly supported by the industry, but at this point most CDNs have announced they will end support for Flash streaming in the near future.

A number of CDN service providers have already depreciated RTMP in favor of HLS, HDS, Smooth Streaming, and other HTTP-based protocols. Comcast already does not support RTMP, with other CDNs including Fastly and Highwinds ending their support as well.

Other networks have initiated this transition. Level 3 Communications, for example, stopped taking new Flash streaming customers at the beginning of 2016. Verizon Digital Media Services will drop RTMP support in June 2017, although they will still support RTMP ingestion.

Akamai, DaCast’s CDN, is taking a similar path. They are moving away from RTMP gradually, but plan to continue to support existing customers. Limelight Networks and Amazon CloudFront are two of the few CDNs that still have no definitive plans to drop RTMP support. No matter which CDN you use, your content should play fine with a modern delivery format and HTML5 video player.

[Tweet “Changes coming to the world of #onlinevideo: #FlashIsDead, #HTML5 video player and #HTTPS are on the rise.”]

Which HTML5 video player to use to ensure compatibility?

For video producers online, the decline of Flash is a challenge. Luckily, many options exist to make the transition easier. These include embedded video player software for deployment to websites under your control. These video players can support Flash, HTML5 video, or both.

Many modern video players support both formats. For example, the popular video.js video player is HTML5-based. JW Player, which powers video on millions of popular websites, uses HTML5. However, like video.js, it has fallback support for Flash. Certain content, such as .flv videos, can only be played back using Flash. As for streaming, JW Player supports DASH, HLS, and RTMP.

Another option is MediaElement.js, which mimics HTML5 even when playing video using Flash or Silverlight in older browsers.

There are a multitude of options available when it comes to using a compatible HTML5 video player. Even better, some offerings are open source projects which you can modify to suit your needs. Video.js is the best example. You can change every aspect of video.js, including appearance, controls, and more with a bit of coding.

[Tweet “Which video player should you use to ensure compatibility with all #browsers? #onlinevideo #videoplayer #embedding”]

About DaCast’s HTML5 video player

Another option is to use the video player provided by your online video platform. Here at DaCast, our video player is based on video.js and completely compatible with the HTML5 revolution, and ready for HTTPS delivery.

The DaCast video player is built to use HTML5 video natively, with fallback to Flash. That means that any video hosted or streamed via the DaCast platform can be viewed on any device that supports either HTML5 or Flash video.

For both viewers and producers, this is an ideal situation. Viewers will be automatically delivered the content that their device is capable of playing back. This makes for a convenient and easy viewing experience. Content creators have the benefit of universal compatibility. Additionally, they only have to use a single embed code to reach every audience.

All of this means that DaCast video players are compatible with every modern web browser, including Chrome, Firefox, Opera, Edge, Safari, Vivaldi, UC Browser, Samsung Internet, and many others. Even many old, outdated browsers still support DaCast video with no problem. That means you can reach 99.9% of internet users with no problems.

DaCast’s video player is configurable in many different ways. You can change the color scheme, choose a watermark such as a logo, change embedded video size, select between iframe and Javascript, embed social sharing buttons, and more. For maximum compatibility, Javascript is usually the best option.

One crucial advantage DaCast possesses is responsiveness. Any video player scales automatically to different screen sizes and device types. It’s also extremely fast to load—about 20 times faster than the previous version! Combined with a fast first-frame time, this grants a snappy experience to users. It also supports plugins for extending the functionality of your video player, and popular advertising standards such as VAST2.

Finally, the DaCast video player has a dedicated API. This API integrates with Google Analytics, allowing you to connect players to your account. Live events can also be integrated into your analytics account, enabling you to track audiences in real time.

[Tweet “DaCast’s #video player defaults to #HTML5 but falls back on #Flash. Compatible with everything!”]

How to embed player for video

Embedding a DaCast HTML5 video player window is easy. Here are some instructions to help you get started.

  1. First, visit your account back office. Then, navigate to the live channel or on-demand video content that you wish to embed.
  2. Click the “Publishing Options” (“Publish Settings” in channel view) in the drop-down menu.
  3. At this stage, you’ll be presented with a series of options. You can restrict allowed referrers or viewer countries. You can also select a custom player theme if you choose, turn video autoplay on or off, add subtitles, and choose if you want to publish your video on the DaCast portal. Choose your preferred settings.
  4. Below, you’ll need to select the width and height you’d like your embed code to be. A common size is 640 x 480, but you can go bigger or smaller as you like. Feel free to simly use the default.
  5. Then, you’ll need to select whether your embed should use Javascript or iframe code. These options are somewhat advanced. In general, Javascript is the preferred option as it supports more features. However, iframe works on a wider range of services, including websites that you don’t code yourself.
  6. Finally, you can copy your share code. Select all the code in the text box and copy it to your clipboard.
  7. Then, visit the website you want to embed the video on.
  8. Log in to your administrative backend, then enter “code view” for the page in question. Paste the embed code in the proper location relative to other content, save, and you’re ready to go! Your HTML5 video player will appear on the page.

Embedding code into a website can be a bit confusing if you’ve never done it before. To learn more about embedding code on the most popular website hosting platform, WordPress, check out this guide.

A similar process also applies to other website platforms. However, the specifics can vary. For example, Weebly is a website platform that uses drag-and-drop elements. These elements include an “HTML code” block. To embed a video on Weebly:

  1. First open your website editor.
  2. Navigate to the page of your choice.
  3. Locate the HTML code block in the sidebar, then drag this block to the proper location on the page.
  4. Click the block to edit it, paste in your embed code, and click publish.

If everything is working well, you should be able to visit your website page and see the embedded video now.

[Tweet “Here’s how to embed #video content into a website. #VideoMarketing #WebDesign #Video #Embed”]

Social media sharing via HTML5 player embed

On social media, sharing DaCast on-demand or live streaming content is easy as well. You may have noticed the “Facebook share code” option. This code can be copied directly into a Facebook post.

When shared, this link will create a video that can be played directly on Facebook via the timeline, page, or profile. This function works for both on-demand videos and live streaming video. Once inserted into a post, the URL can even be removed, leaving a streamlined, clean social media post with embedded video. This functionality is ideal for maintaining the security and rights associated with a white-label video host, while still accessing the large audiences found on social media platforms.

[Tweet “Here’s how to share your #livestreams and videos on #Facebook natively. #VideoMarketing #OVP”]

Conclusion

Times are changing in video, and hopefully this article will help you keep up. Flash is no longer the dominant force it once was. Are you ready for HTML5? Even RTMP for delivery to a CDN is fading away, albeit gradually. A move towards more modern, fast, and reliable standards is taking place. There are growing pains, but the changes are good.

However, the transition away from Flash isn’t the only change in the online video industry. Increasingly, HTTPS is becoming the standard for delivery. With Chrome holding onto its crown as the world’s most popular browser, their decision to label non-HTTPS content is huge.

As with any change, businesses and service providers are adapting. Using a video platform like DaCast means that you will be prepared for the future. Our thorough and comprehensive HTML5 player support and  increasing support for HTTPS means that your content will be delivered securely and safely. Whether you use DaCast or another video hosting service, you should be aware of and prepare for these changes.

And if you want to try us for free, sign up today to enjoy free streaming and all our great features for 30 days.

0 thoughts on “Research Paper Html5 Player

Leave a Reply

Your email address will not be published. Required fields are marked *