In this article, we will discuss major methods of embedding video files in an HTML document. The methods are easy enough, and most often, they require copying and pasting of an HTML string. These strings are available through your sharing snippet that either contains a video tag or an iframe tag. We will discuss about both methods of using a video tag and an iframe tag with their features and attributes.

Embed Video in HTML using < Video > tag

The < video > embed element in HTML is used to embed a video file into an HTML document. The HTML video element shows a video on a web page without the requirement of Flash Player, like additional plugins. After implementing HTML5, embedding videos to a web page became as easy as adding an image. Although the data in the video element is supposed to be video, you can also add images and audio. The content is written in between the opening < video > and closing < /video > tags.

Web browsers commonly supported video formats are mp4, WebM and Ogg. The < video > tag contains < source > tags that contain different video sources. The browser picks the one it supports. For example, different video sizes for iPad and retina displays can be provided with different source URLs. This can be seen in the below code snippet:

Syntax:

< video src=”video.webm” type=”video/webm” controls >
< /video >

Or

< video controls >
< source src=”movie.mp4″ type=”video/mp4″ >
< source src=”movie.ogg” type=”video/ogg” >
< /video >

Note: < source > tag is an empty tag. There is no need to close it except in the case of XHTML.

Attributes of video element for embedding in HTML

There are three attributes which get mainly used with < video > tag namely, “src”, “controls” and “type”.

src – This attribute gets used to specify the source URL of the video. It specifies the URL or video file location to embed.

If you are not using the ‘src’ attribute of the video tag, then you need to use the < source > tag with its ‘src’ attribute to specify the source URL. The additional benefit a < source > tag provides is of having different source URLs for different display sizes and video types.

< video controls >
< source src=”movie-1080p.mp4″ type=”video/mp4″ >
< source src=”movie-480p.mp4″ type=”video/mp4″ >
< /video >

type – This attribute specifies one of the three supported video format types. Similar to the ‘src’ attribute, this attribute can also be specified with the < source > tag and have multiple types.

controls – The controls attribute displays player controls supported by browsers. If this attribute is not used, the player won’t display any controls, not even pause and play. If specified, the browse will offer video controls to the user, such as volume, play, pause, resume playback and more.

Other attributes:

autoplay – A boolean expression, when specified, automatically starts the video as soon as the data has finished loading.

The automatic video playback (mostly with an audio track) when a visitor visits a website is not liked by many and is often considered a bad user experience. Some browsers like Chrome70.0 allow autoplay only when the muted attribute is present.

To autoplay a video with muted audio, add ‘muted’ after ‘autoplay’.

< video width=”340″ height=”260″ autoplay muted >

preload – This attribute gives the author the freedom to hint to the browser whether to download the video or the metadata or not to load the video when the page loads the first time. The attribute allows 3 values to pass:

• none – The video will not be preloaded. The video content part of the page will be displayed as a blank region on the screen.
• metadata – Only the video metadata (height, width, duration etc) is fetched before the user starts video playback
• auto – The entire video is downloaded irrespective of user interest. The auto request can be ignored by the browser.

Note: The autoplay attribute can override the preload. The preload attribute is just a hint for the browser. 

loop – A boolean expression, when specified, plays the video again once the playback has come to end.

height – Sets the video display area height.

width – Sets the video display area width.

muted – A boolean attribute to initially mute the audio in a video. If set to ‘false’, the audio will play when the video starts.

poster – A preview image that is shown when the video is loading or until the time user hits the play button. If the attribute is not specified, nothing is displayed till the time the first video frame is available. The first frame then becomes the poster frame.

Embed Video in HTML using < iframe > tag

The <iframe> HMTL element specifies an inline frame containing independent HTML. With this frame, you can embed another HTML page or external URL into the current page (parent page). Commonly it is used to embed videos, external ads, maps and other media. You can even use iframe to embed videos in wordpress.

The content is referenced in the ‘src’ attribute of each element, which makes it a completely independent resource in reference to the current document.

The embedded document or Video behaves like it is a part of the current page, and you can interact with it. The HTML document may have separate CSS or JavaScript, which is refreshed and loaded separately from the parent site whenever the web browser parses the iframe tag.

Here is an example of a YouTube video embed code using an iframe element. The <iframe> tag below would load a 560x315px player, which will play the YouTube video id ‘M7lc1UVf-VE’. The below embed code from YouTube also uses the ‘allow’ parameter to specify multiple features like autoplay, picture-in-picture, etc.

<iframe width=”560″ height=”315″ loading=”lazy” src=”https://www.youtube.com/embed/M7lc1UVf-VE” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

How an iframe loads a video element?

Once an < iframe > element is placed with a ‘src’ attribute, it will start loading the HTML content of the source URL. The HTML content will load with a < video > element containing the source or blob URL of the video. For example, the above YouTube iframe embed code will eventually unfold to,

< html >
< head >< /head >
< body >
…… < video >…..< /video >
< /body >
< /html >

Attributes of iframe element for Video embed in HTML

allow – specifies the feature policy of the <iframe>. The policy is used to define features available to the <iframe> based on the request origin. The allow attribute values are the following features which can be used as per need.

• accelerometer
• ambient-light-sensor
• autoplay
• battery
• camera
• display-capture
• document-domain
• encrypted-media
• execution-while-not-rendered
• execution-while-out-of-viewport
• fullscreen
• gamepad
• geolocation
• gyroscope
• layout-animations
• legacy-image-formats
• magnetometer
• microphone
• midi
• navigation-override
• oversized-images
• payment
• picture-in-picture
• publickey-credentials-get
• speaker-selection
• sync-xhr
• unoptimized-images ExperimentalNon-Standard
• unsized-media ExperimentalNon-Standard
• usb
• screen-wake-lock
• web-share
• xr-spatial-tracking

allowfullscreen – when set true, activates full screen via requestFullscreen() method.

height – defines frame height in CSS pixels. The default value is 150

weight – defines frame width in CSS pixels. The default value is 300

name – name for the embedded browsing context.

allowpaymentrequest – is set to true, a cross-origin <iframe> is allowed to invoke Payment Request API

loading – specifies how the web browser should load iframe

• eager: immediately load the iframe
• lazy: defer iframe loading as defined by the browser (upon reaching a calculated distance from the viewport).

sandbox – applies a set of restrictions for the iframe content. The attribute value is either empty for applying all restrictions or space-separated tokens to lift particular restrictions.

srcdoc – defines the HTML content of the page to show in the <iframe>

The <iframe> tag supports Global and Event attributes in HTML. Few events triggered by media are ‘onabort’, ‘oncanplay’, ‘ondurationchange’, ‘onplay’, ‘onvolumechange’ and more.

Responsive Video Embedding in HTML5

In today’s digital landscape, where users access websites on a wide range of devices and screen sizes, ensuring that your embedded videos adapt seamlessly to different screens is paramount. Responsive video embedding not only improves user experience but also contributes to higher engagement and better SEO rankings. Here’s how you can achieve responsive video embedding and optimize the viewing experience for all users. This can be achieved through the following techniques,

1. Using Width and Height Properties

A simple way to make the <video> element responsive is to set its width property to 100% and height to auto. This allows the video player to scale up and down responsively:

3. Using Media Queries

Media queries enable you to apply specific styling and sizing rules to embedded videos based on the device’s screen width. This approach allows you to optimize the video layout for different breakpoints. For instance, you can adjust video dimensions, font sizes, and spacing to create a seamless viewing experience on smartphones, tablets, and desktops.

4. Using Viewport Units

Viewport units, denoted as vw (viewport width) and vh (viewport height), provide a dynamic way to set video dimensions as percentages of the screen’s viewport size. This approach ensures that videos maintain their proportions regardless of the user’s device. By using viewport units, you can create videos that scale smoothly from large monitors to small smartphone screens.

5. Using Aspect Ratio Padding

Maintaining the aspect ratio of embedded videos in HTML5 is crucial to prevent distortion and ensure a visually appealing viewing experience. Applying padding with a percentage-based value (padding-bottom) allows you to create a responsive aspect ratio for the video container. This technique ensures that the video retains its intended dimensions and appearance.

Vishal Sharma

My expertise focuses on DRM encryption, CDN technologies, and streamlining marketing campaigns to drive engagement and growth. At VdoCipher, I’ve significantly enhanced digital experiences and contributed to in-depth technical discussions in the eLearning, Media, and Security sectors, showcasing a commitment to innovation and excellence in the digital landscape.

The post How to Embed Video in HTML using iframe or video tag element appeared first on VdoCipher Blog.

Here is a PHP code to use VdoCipher API along with dynamic watermarking. You need to pass the video ID to the vdo_embed function in embed_code.php and the your API secret key to the $api_key variable in vdo_embed.php. The code should work out of the box after editing the details. The sample code is so structured that you only need to add vdo_embed.php once to your file system, and enter the embed code given in embed_code.php at each instance of video player.

https://gist.github.com/milangupta4/e171ab540f949d64ab07244236dacfab

The structure of annotation JSON is described in the link : Add text to videos with watermark. To add user details you can create a $userdetail variable which will collect user-identifiable information such as name and email address from your website database, and append it to the watermark.

PHP Sample code to get OTP

In this example, the sample videoID is 1234567890, and the API Secret Key is a1b2c3d4e5. The time-to-live for OTP validity is set to 300s in the sample code. You can reference the API documentation for more info.

$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://dev.vdocipher.com/api/videos/1234567890/otp",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
"ttl" => 300,
]),
CURLOPT_HTTPHEADER => array(
"Accept: application/json",
"Authorization: Apisecret a1b2c3d4e5",
"Content-Type: application/json"
),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}

FAQs

How to protect your videos on the PHP backend?

The security integration of video streaming, like multi-DRM, is not directly available for PHP use. The easiest solution would be to use a secure video streaming service provider like VdoCipher and integrate with their APIs compatible with the PHP backend.

How to secure API in PHP?

API gets used as a documented method of interacting with other services, and that is why there is no exact answer to the question, but applying OAuth and using a shared secret along with the request made can work as generic solutions.

Is PHP vulnerable to Video Security lapses?

No, it has nothing to do with video security, as videos get secured through cloud encoding and global distribution via a dynamic key exchange mechanism.

The post PHP implementation of VdoCipher API for Video Security appeared first on VdoCipher Blog.

We generally recommend WordPress-based sites as they offer a mid-way between efforts and customizability options. Our integrations with WordPress are also quite good and we have written a few WordPress-related blogs explaining how to use LMS themes + plugins to build good course WordPress sites. One more detailed video blog will be released soon to make it very clear.

But in certain cases, course creators like popular ready-to-use course-selling sites, as it is quick and easy to launch. So, this article is intended for those people and explains our iframe integration with popular ready-to-use e-learning websites. But, let us first discuss the need for DRM-based video security for eLearning.

Need to Integrate a Secure Video Hosting for LMS, CMS & eLearning Platforms

There are many reasons for wanting to manage the rights associated with intellectual property. Authors and artists wish to control what can be done with their creations, scholars wish to ensure that they receive proper attribution, commercial enterprises wish to support business models that involve licenses and fees, and consumers want an environment free of legal worries and unexpected costs. Although rights themselves are not technological – they are defined by laws, beliefs, and practices – technology can be used to transmit, verify, interpret, and enforce rights as they apply to digital content and services. This is called digital rights management, or simply DRM.

In a distributed networked environment, multiple rights associated with multiple objects come into play as content and services are created, distributed, aggregated, disaggregated, stored, found, and used. This is particularly applicable to e-learning, where standards and technologies are being developed specifically to support the sharing and reuse of learning resources, for example via the collaborative and distributed generation of learning objects, the aggregation of smaller objects to create larger objects, and the creation of resource-sharing networks. In addition, managers of significant collections of learning objects (or metadata records of learning objects) are exploring ways to offer searches and other services. For e-learning to function in this type of environment, appropriate models and implementation of DRM are needed.

But when it comes to application, the DRM video protection is still hard to integrate. This is where service providers like VdoCipher come into play with easy embedding for every eLearning platform, LMS, and CMS. So let’s discuss How?

How to Integrate VdoCipher Player in Major eLearning Platforms and LMS

The 6 ready to use, course video selling websites whose integration will be discussed here are –

• Teachable
• Learnworlds
• Thinkific
• Uscreen
• Webanywhere
• TotaraLMS.

Disclaimer – We are not reviewing these businesses, nor do we suggest using any particular of them, nor do we have any partnerships with them. We picked these 6 because either we had experience with our customers asking for them or they were popular. The article is to help our customers who are already looking to sell vides online on these sites. We explain in detailed steps with screenshots, how to have VdoCipher secure video streaming integrated with all these portals.

Overview: The general idea for integrating VdoCipher in these sites is to search for where to embed the iframe option. Which is generally mentioned as these words or icons – ‘html embed, iframe embed , <> , </> ‘ . And iframe is generated from our dashboard for each video with a whitelisting option. The domains provided to you by these sites should be in HTTPS for html5 secure player to work, else it will ask for Flash. So, please ask these companies for a https domain, most of them do provide that.

Details for step by step integration on each particular website is mentioned below, so that it is clear and quick to use. Screen shots for all the steps are included.

1. LearnWorlds

Go to Dashboard> Courses> EMBED URL (Do Not Select Video option)> Iframe. Don’t choose video option while integrating, always choose embed url and use iframe.

2. Teachable

 Go to Course > Curriculum > Add text > Choose < > iframe sign.

Detailed IFrame security settings & Teachable Embed tutorial.

3. Thinkific

Go to Add content > Add Text > </> icon for iframe embed

Detailed IFrame security settings & Thinkific Embed tutorial.

4. TotaraLMS

Go to – Create Course  > Add activity or resource> Add Topic > Go to Link icon + URL to external page

5. Uscreen

Go to – Content > Programs > Content > Embed

6. Webanywhere

It is Moodle based web portal specially suited for schools and colleges.. Our moodle plugin with player version 1.4.5 fits in there.

Ask the Webanywhere support team to integrate our Moodle plugin with 1.4.5 version and use short code as documented.

7. CourseCraft

Go to – Landing page >  <> HTML sign > edit

Find more details about VdoCipher’s DRM infrastructure and our integration of Widevine DRM for Hollywood-grade security, which helps us protect your premium content.

For a free full version 5 GB Trial with VdoCipher, please register

References

ResearchGate – link

Siddhant Jain

CEO, VdoCipher. Writes about video tech, ed tech and media tech.

www.vdocipher.com/

The post Integrate VdoCipher Secure Videos in LMS, CMS & eLearning Platforms appeared first on VdoCipher Blog.