Syncing Content With HTML5 Video

Advertisement

One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic <object> element to a highly specified <video> and <audio> element, and with a rich API to access in pure JavaScript.

Native multimedia capability has a few benefits:

  • End users have full control over the multimedia.
    The native controls of browsers allow users to save videos locally or email them to friends. Also, HTML5 video and audio are keyboard-enabled by default, which is a great accessibility benefit.
  • End users do not need to install a plug-in to play them.
    The browser already has everything it needs to play movies and sound.
  • Video and audio content on the page can be manipulated.
    They are simply two new elements like any other that can be styled, moved, manipulated, stacked and rotated.
  • You can build your own controls using HTML, CSS and JavaScript.
    No new skills or development environment needed.
  • Interaction with the rest of the page is simple.
    The multimedia API gives you full control over the video, and you can make the video react both to changes in the video itself and to the page around it.

Let’s quickly recap how you can use native video in the browser, starting with the embedding task.

Embedding Video

This is old news. Embedding video in a document is as easy as adding a <video> element and pointing it to the source video. Adding a controls attribute gives you native controls:

<video src="chris.ogv" controls></video>

This is the theory, though. In the real world of intellectual property, corporate competition and device-specific solutions, we as developers have to jump through a few hoops:

<video controls="true" height="295" width="480">
  <!-- hello iOS, Safari and IE9 -->
  <source src="chris.mp4" type="video/mp4">
  <!-- Hello Chrome and Firefox (and Opera?) -->
  <source src="chris.webm" type="video/webm">
  <!-- Hello Firefox and Opera -->
  <source src="chris.ogv" type="video/ogg">
  <!-- Hello legacy -->
  Your browser does not support the video tag, 
  <a href="http://www.youtube.com/watch?v=IhkUe_KryGY">
    check the video on YouTube
  </a>.
</video>

This shows how we need to deliver video in three formats in order to satisfy all of the different browsers out there. There are a few ways to accomplish this. Here’s what I do…

Convert Video With Miro Video Converter

Miro Video Converter1 is an open-source tool for Mac that makes converting videos dead easy. Simply drag the video to the tool, select WebM as the output format, and watch the progress. A few other converters for Windows and Linux2 are available, too.

Miro Video Converter in action - simply drag a video, select output format and press convert3

Hosting And Automated Conversion On Archive.org

Because I license my videos with Creative Commons4, I can use Archive.org5 to both host the videos and convert the WebM versions to MP4 and OGV. Simply upload your video and wait about an hour. Reload the page, and the server pixies at Archive.org will have created the other two formats (and also a cool animated GIF of your video).

Different versions of an uploaded video by archive.org6
You can use Archive.org7 to both host the videos and convert the WebM versions to MP4 and OGV. Large view8.

Industrial-Strength Conversion With Vid.ly

WebM, OGV and MP4 take care of only the major browsers, though. If you want to support all mobile devices, tablets and consoles and you want the video quality to adapt to the user’s connection speed, then you’ll have to create a few dozen versions of the same video. Encoding.com feels our pain and has released a free service called Vid.ly119, which converts any video you upload into many different formats more or less in real time. Unfortunately, the service is in private beta at the moment, but you can use the invite code HNY2011.

Different versions of an uploaded video by archive.org10
Vid.ly119 converts any video you upload into many different formats more or less in real time. Large view12.

Furthermore, Vid.ly creates a URL for your video that automatically redirects the browser or device calling it to the right format. This keeps your embed code as simple as possible:

<video src="http://vid.ly/4f3q1f?content=video" controls></video>

Cool, isn’t it?

The Power Of The HTML5 Video API: Syncing Content

Now that our video is on the page, let’s check out the power of the API. Say, for example, you want to know what part of the movie is playing right now. This is as simple as subscribing to an event of the <video> element:

<div id="stage">
  <video src="http://vid.ly/4f3q1f?content=video" controls></video> 
  <div id="time"></div>
</div>       
<script>
  (function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = v.currentTime;
    },false);
  })();
</script>

If you try this out13 in your browser, you will see the current time below the video when you play it.

Displaying the current time of a video14

You will also see that the timeupdate event gets fired a lot and at somewhat random times. If you want to use this to sync the showing and hiding of parts of the document, then you’ll need to throttle it somehow. The easiest way to do this is to limit the number to full seconds15 using parseInt():

<div id="stage">
  <video src="http://vid.ly/4f3q1f?content=video" controls></video> 
  <div id="time"></div>
</div>       
<script>
  (function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = parseInt(v.currentTime) + ' - ' + v.currentTime;
    },false);
  })();
</script>

Displaying the current time of a video16

You can use this to trigger functionality at certain times. For example, you can sync an Indiana Jones-style animation of a map to a video17:

For a full explanation of this demo, check out the blog post on Mozilla Hacks18.

Let’s have a go at something similar: a video that shows the content from web pages being referred to by a presenter. Check out this video demo of me explaining what we’re doing here19, with the content appearing and disappearing at certain times in the video. Make sure to jump around the video with the controls.

Syncing video and content20

We’ve already covered how to get the current time of a video in seconds. What I want now is to display and hide a few parts of the website at certain times in the video. If video is not supported in the browser, then I would just show all of the content without any syncing21.

The first issue I have to solve is to allow the maintainer to control what is shown when. Normally, I’d use a JSON object in the JavaScript, but I figure that keeping the maintenance in the markup itself makes much more sense.

HTML5 allows you to store information in data- attributes. So, to make it easy to tell the script when to show what, I just use data-start and data-end attributes, which define the time frames for the articles that I want to sync with the video:

<article data-start="64" data-end="108">
  <header><h1>Archive.org for conversion</h1></header>
  <p><a href="http://archive.org">Archive.org</a> is a website dedicated to 
archiving the Internet. For content released as under a Creative Commons
license, it offers hosting for video and audio and automatically converts the
content to MP4 and Ogg video for you.</p>
  <iframe src="http://archive.org"></iframe>
</article>

You can try it out by downloading the code22 and changing the values yourself (or use Firebug or the Web Inspector to change it on the fly).

Here’s the script (using jQuery) that makes this happen:

/* if the document is ready… */
$(document).ready(function(){

/* if HTML5 video is supported */
  if($('video').attr('canPlayType')){
    
    $('aside::first').append('<p>Play the video above and see how ' +
                             'the different connected content sections ' +
                             'in the page appear at the right moment. '+
                             'Feel free to jump forward and backward</p>');

    var timestamps = [],
        last = 0,
        all = 0,
        now = 0,
        old = 0,
        i=0;

/* hide all articles via CSS */
    $('html').addClass('js');

/* 
   Loop over the articles, read the timestamp start and end and store 
   them in an array
*/
    $('article').each(function(o){
      if($(this).attr('data-start')){
        timestamps.push({
          start : +$(this).attr('data-start'),
          end : +$(this).attr('data-end'),
          elm : $(this)
        });
      }
    });

    all = timestamps.length;

/* 
  when the video is playing, round up the time to seconds and call the 
  showsection function continuously
*/
    $('video').bind('timeupdate',function(event){
      now = parseInt(this.currentTime);

      /* throttle function calls to full seconds */
      if(now > old){
        showsection(now);
      }
      old = now;

    });

/*
  Test whether the current time is within the range of any of the 
  defined timestamps and show the appropriate section.
  Hide all others.
*/
    function showsection(t){
      for(i=0;i<all;i++){
        if(t >= timestamps[i].start && t <= timestamps[i].end){
          timestamps[i].elm.addClass('current');
        } else {
          timestamps[i].elm.removeClass('current');
        }
      }
    };
    
  };
});

So, what’s going on here? First, we’re checking whether the browser is capable of playing HTML5 video by testing for the canPlayType attribute. If all is fine, then we add some explanatory text to the document (which wouldn’t make sense if the browser couldn’t show a video). Then, we define some variables to use and add a class of js to the root element of the document. This, together with the .js article selector in the CSS, hides all of the articles in the document.

We then loop through the articles, read out the timestamps for the start and end of each of the sections and store them in an array called timestamps.

We then subscribe to the timeupdate event, rounded up to full seconds, and call the showsection() function every new second.

The showsection() function loops through all of the timestamps and tests whether the current time of the video is in the range of one of the articles. If it is, then that article is displayed (by adding a current class) and all the others are hidden. This could be optimized by storing the current section and removing the class from only that element.

Can We Do The Same With Less Or No Code?

If you like the idea of syncing content and video, check out the Popcorn framework23, which is based on the same techniques but gives you much more control over the video itself.

popcorn.js24

Butter25 is a point-and-click interface to go on top of Popcorn. It has a nice timeline editor that allows you to play a video and show all kinds of Web content at certain times. You can export and send your creations to friends, too.

Screenshot Butter in action26
Large view27

With systems like Popcorn and Butter, we are one step closer to having authoring tools for the rich interactions that HTML5 offers us. What can you think of building?

Summary

Today we looked at how to embed video onto a Web document; and with the native video API that gives us event handlers for changes in a video, we saw how easy it is to make the video interact with the rest of the document. Instead of trying to control the video, we use native controls to make the page react to what is happening in the video itself. We used semantic HTML and data attributes to allow maintainers to use the syncing script without having to touch any JavaScript, and we looked at some services that make hosting and converting video easy.

All of these cool technologies give us a lot of power, but we can’t just, say, write some simple CSS, JavaScript and HTML to use them. If we want open technologies to succeed, then we have to make them easy for people to use. The next step now is to move from the “one-off implementation” phase and think about creating tools and step-by-step code-creation systems for users who want to use these cool new technologies but don’t want to spend much time and effort doing it.

With native audio and video in browsers, we’ve taken a massive step toward make the open Web more engaging and beautiful. The next step will be to use multimedia not only for output but for input. A lot of hardware these days comes with cameras and microphones; we need to start using and supporting open technology that allows our users to take advantage of this hardware to interact with our Web products.

For a screencast on this topic, see Syncing page content with HTML5 video28 on the Mozilla Hacks blog.

(al)

↑ Back to topShare on Twitter

An international Developer Evangelist working for Mozilla in the lovely town of London, England.

  1. 1

    It’s like you people are reading my mind. I’ve done some HTML5 video projects in the past (with the help of JWPlayer 5 which I highly recommend for fallback) but I came across a new project last night where I needed something to quickly generate three sources for a video (ogg, mp4, and webm) and voila!

    Get out of my head smashing magazine! (PS I love you…)

    0
  2. 2

    I will start soon to learn web development and I’m gathering articles like this one for when I start. Just diigo it :)
    I’m absolutely convinced that HTML5 will significantly boost the user experience of web applications and will also boost it’s use. The adoption of HTML 5 on mobile browsers will also pose some design challenges to web developers in terms of compatibility with all the (so) different screen resolution.

    Thanks Smashing Magazine
    PS: I would really like to see articles about design of desktop applications. Everywhere I look for design articles it seems to be always oriented to web development. Some articles apply but there are design challenges specif of desktop applications that I don’t see addressed.

    0
  3. 3

    Senthil Kumar R

    March 11, 2011 4:28 am

    Very useful at the right time.

    Smashing Magazine rocks as always.

    0
  4. 4

    Great article.

    Since not all modern browsers read the same movie format (Chrome-WebM, Safari-H264, Firefo-ogg), Flash up till today seems the only viable solution.

    Just develop it in flash. Lol I see no reason why the world needs to change to adapt to the iOS,your solution, come up with a solution JUST for iOS, don’t change the whole system.

    Flash Video has a leap of over 10 years experience, who we kidding Flash 10.2 hardware acceleration puts the game at new levels.

    0
    • 5

      I really don’t understand your stance on this. Even Microsoft is putting millions of dollars behind HTML5 video. I’ll agree that Flash (as well as Silverlight) has its purpose however this new standard for video delivery WILL be the future. I agree that the road is rough ATM but all new technology suffers in this way. Remember when PS/2 was the standard and Apple introduced Macs with Intel’s USB as its default peripheral standard?

      Once upon a time Flash was in the same position as HTML5 Video; “why use it…why would I want to use a plugin…”. If people like you trolled the web hell-bent on killing flash, we wouldn’t have this debate today. Innovation is the machine behind the web. Embrace or be left behind!

      In the end, there is more room for growth with emerging standards then in technology of a bygone era. Flash is king today but HTML5 is tomorrow’s technology and we’re only seeing the beginning…

      0
    • 6

      Have you read the article, or did you just make that “fact” up once and keep repeating it? Just saying… Apples and pears. With Flash you have no open native API to talk to page content. With HTML5 you have. That’s what this is about.

      0
    • 7

      Flash also uses H264. I think you should just use H264 and have it switch between flash and html5 depending on what the browser supports. That way no one gets left out.

      Having to deal with more than one video format is not worth the trouble, and WebM Ogg Theora is a pathetically low quality format anyway.

      0
      • 8

        Then again, you get into the trouble of having to support two video API’s, one for HTML5 video, and another for the Flash video player. Ideally, the Flash video player will conform to the HTML5 video API. I believe there are some flash video players are trying to support the HTML5 video API.

        0
    • 9

      What about mobile device.

      0
  5. 10

    I just downloaded this yesterday, totally slick OGV converter for Mac. Lovely small app, totally worth checking out.

    0
  6. 11

    Awesome read :)

    0
  7. 12

    I thought HTML5 video allowed video to be viewed in the browser window as long as the end user had a player that could handle that format. Like if I have Quicktime installed on my computer, then I can view any .mov file embedded in any webpage, no matter what browser or OS I had. That’s how it was described back when it was first being developed. Is that just not how it works.

    This next question may already be answered by any responses to the first part above, but what’s the deal with different browsers “needing” different formats? I thought all that was just for if have no other players on your system (more common with phones than PCs) and you’re limited to using the browser itself as the actual player. Isn’t that the “native” part? Then why should I worry that Google Chrome “needs” WebM so long as I have a player on my system that can play the other format being offered by a website.

    Huh?

    0
    • 13

      The whole concept of html5 video is that you do *not* need a player installed on your operating system but that it is part of the browser. This is especially important on mobile devices where you simply can’t install Quicktime. Moreover, a “mov” is a container format which means it has video in a certain compression formats and audio in another contained in a file. This meant for example in the past that some MOVs done with Quicktime for Mac didn’t work on a PC and vice versa. The same applies sadly enough right now for browsers. Different browsers expect video in different formats and it has nothing to do with what players or drivers you have installed on your OS.

      0
      • 14

        Hello Chris,

        I am currently researching on HTML5. I would like to know about the E-mail embedding capabilities of HTML5. I know Apple’s native mail client supports it but what is stopping other mail clients from adopting it??Is it even a possibility in near future? It would be great if you can answer my questions. Thanks in advance

        0
  8. 15

    A very interesting read. I’m really excited about the possibilities HTML5 brings for video and multimedia and the level of control and styling sounds pretty awesome.

    However I have to agree with some of the other comments, until we can stick to one video format and a single video file (at least per quality level e.g. Low vs. HD) then this is still quite limited for widespread practical use. Sure it’s a viable solution if you want a handful of videos on your site or perhaps a few feature videos with more interaction on your home page or something. It would not really be practical to use it on a very video heavy site with several hundreds of videos as you would not only need to convert all the existing content but also end up using significantly more storage.

    I can definitely see the usefulness in other scenarios though, more interaction with viral or advertising videos or feature videos that are a more integrated part of the design or even portfolio sites.

    But if all you want HTML5 for is iOS support then it might be easier to use something like the Longtail JW Player which is Flash based with an HTML5 fallback.

    0
  9. 16

    Miro works great for Windows too!

    0
  10. 17

    Great article!

    0
  11. 18

    Christopher Anderton

    March 12, 2011 5:46 pm

    When we all started to support the MPEG4 ISO standard (container, levels like H264 and AAC and so on), then all we needed is Video Codec Wars 2.0.

    0
  12. 19

    Is there a way to secure HTML5 video, because is some cases you do not want viewers to be able to download your content and I know that Flash does provide that feature through the Media Server

    Also, lets us all remember that Flash Video is just one part of the Flash Platform so until HTML5 gets to that level of interactivity Flash is still very important for the web experience

    But with that being said, I think it is great for us to learn as much as we can about HTML5 and maybe HTML6 will be more of a apples to apples comparison to Flash in the future

    0
    • 20

      Ian….if users can view it, they can download it….its as simple as that (same principle as “how do I hide my source code” – if the browser can render it, the user can steal it). The only thing you can do is make it hard for them to download it by making the actual source of the video a bit tricky so they can’t just type in a URL and have the video spit out at them.

      Spend a little bit of time trying to make it so the user can’t type in a URL and download the file directly…but not too much time, because in the end, semi-sophisticated users will get their hands on whatever they want…it’s really not that difficult.

      This is usually done through some sort of script (I like PHP) that basically grabs the content of the video file, and serves it up using the appropriate mime-type to whatever is requesting it. Make that script use certain session tokens or cookies to verify the request is valid and that will prevent the user from typing in the source of the script and being able to download the video.

      All that being said, there’s lots of programs out there that basically monitor the requests on a web page and when these program find headers that say this content is video/mp4 or audio/mp3, they’ll download them and then the media file is on the users computer, easy to access and there is NOTHING you can do about this. All the built-in flash security in the world can’t help you.

      0
      • 21

        I’m sorry but I don’t think your comments apply to RTMPE. If you capture a Hulu stream for example, it is useless to you unless you can decrypt it. There was a program that could decrypt it but Adobe successfully issued a takedown notice. There’s a very good reason why Hulu uses Flash and not HTML5 video (apart from browser-compatibility).

        0
        • 22

          While that may add more of a challenge, programs can capture the video live as it’s playing, by, for example, recording a section of the screen and capturing the audio coming from their browser and reassembling them. This is why Adam said if they can play it, they can steal it. Most of the time, it’s more hassle than it’s worth, but some people will do it anyway.

          0
          • 23

            There is a big difference between “some people” and “all people.”

            Using Flash video for delivery, “some” people will seek out a way to download your video, but most will not because it usually requires third party software from somewhat sketchy sources, and people are pretty lazy.
            Using HTML5 video, every single person watching your video has instant access to download and redistribute it without your permission. The author spoke of this as a feature, whereas content producers will see it as a deal breaker…

            0
  13. 24

    Nice article, isn’t there something as Miro Video Converter which is not just for MAC? Thanks for answer, Jan Němec

    0
  14. 25

    I think we should protect the history and culture, as nature has been damaged very serious. Now in our country like this is more renowned Chinese and foreign cultural and historical sites is running out, for example: terracotta army, terracotta soldiers.

    0
  15. 26

    To me, I say HTML5 is great for introducing simpler method of embedding Videos and Audios but the use of Flash cannot be neglected as it is not used for Videos/audios alone. Flash introductory to webdesign is based on animations and more-so presentations and even many websites are flash-based.

    But one thing I know for sure is that by the time HTML5 exist fully in all web-browsers and most internet users upgrade their browser to the latest type then flash used rate will drop by 80%.

    Thanks!

    0
  16. 27

    Awesome! I think we need more articles like this that expound on the benefits of HTML5 in terms of new functionality and real world uses like this new video broadcast/ presentation idea.

    Many thanks!

    0
  17. 28

    Chris Greenhough

    March 14, 2011 12:58 am

    As interesting and informative as this is (and the cited resources are very useful, thanks Christian) I find it difficult to get as excited as a lot of people seem to about a deployment that requires me to create and host multiple versions of the same content. It seems a retrograde step to me, a little like catering to IE6. Besides, the functionality being discussed has been available in Flash for a long time. As a video platform Flash has a lot to recommend it, and interaction with page content is possible via javascript.

    I’m not anti HTML5, don’t get me wrong. I just get tired of Flash-bashers and wanted to balance the argument. The web would have been a much poorer place without Flash, IMHO :-)

    0
    • 29

      As both a web developer and video producer, I am interested in HTML5 video but have some pretty serious reservations that never seem to get addressed by its proponents:

      1. Browser devs are (mostly) great at building good browsers, but are they really the most qualified teams to build good video players? Under HTML5 video, they would be the sole providers of online video playback, so their players dictate (and limit) every aspect of how web video is used and what it is capable of going forward. This represents a substantial bottleneck to innovation in online video. Innovation comes from competition, and under HTML5 video the competition will be limited to Apple, Microsoft, Google and Mozilla. Given the importance of video to the future web, this seems like an inherently bad idea that goes against everything that has driven the web forward to date – the best ideas win out, and are vigorously pursued thanks to open competition.

      2. Without adequate controls and protection, HTML5 video mostly ignores the needs of the very people driving web video forward – content creators. The assumption by HTML5 video proponents is that all video content should be free, and that content creators shouldn’t really care or worry that HTML5 video allows instant downloading of their content. Sure, some motivated people can download video delivered via Flash, but most people don’t because there are at least SOME obstacles in their way. Until this issue is addressed, HTML5 video adoption is going to be slow at best.

      3. Under HTML5 video, at most 3 codecs will be crowned the victors but my guess is that h.264 will become the de facto standard. Again, this flies in the face of everything that has driven the web to date – open competition compels people to innovate and improve. If just one or two codecs are supported by the major browsers (and bear in mind two of those browsers are owned by companies with direct financial interest in h.264) then there is no motivation for the world’s video developers to pursue a better codec. HTML5 video essentially freezes us in time, forcing us all to use the players that Microsoft et al create, and limiting us to just one codec. I don’t see how consumers OR content creators are really benefitting under this scheme.

      4. Flash video does everything the author has highlighted in this article, so it feels a little strange getting excited over a technique that has existed for maybe a decade. Even the specific code being used (addEventListener) is the exact method employed within Flash, presumably because Flash AS3 is a branch of Javascript. Again, why are we supposed to be so excited about old techniques that are merely using new methods, all so that our browsers can control 100% of the web video experience? I don’t think plugins are inherently evil as some web purists do, so I’m having a hard time parsing out the advantages here.

      5. Converting all web video content to HTML5 friendly formats and re-engineering playback to HTML5 will cost the world’s content providers billions of dollars in man hours. What, again, are the benefits to them and their users that warrant this expense? We know what the benefits to Microsoft and Apple are – they tried and failed to compete with Flash on the open market (Quicktime and Silverlight), so HTML5 video gives them an easy way to route the competition without earning it, all the while cloaking themselves in this phony veil of supporting standards.

      0
  18. 30

    Abdullah Al-Haqbani

    March 14, 2011 1:40 am

    I see that the majority of the comments discuss the value of embedding videos using HTML5 or converting videos to different formats for different browsers..
    Guys! the main point of this article is to show you “how to sync content with HTML5 video” . That’s the big deal..

    0
  19. 31

    Great article. Thanks!

    BTW: The example of time being showed under the video didn’t work for me :(

    0
  20. 32

    I am into synchronized video content and have worked up some concepts. I’m digging the Popcorn framework! The problem with iOS (iPhone, iPad) is that the video goes full screen so having other synchronized content becomes useless. Anyone know of anyway to get around this unfortunate seemingly uncontrollable behavior?? I’ve researched it for several hours and can’t find anything.

    0
  21. 33

    Just wanted to point out, Miro Video Converter works on Windows too.

    0
  22. 34

    Now if there where only a butter-like app for windows developers, seeing as how >80% of the web users are on that platform anyway.

    0
  23. 35

    This was easy to follow and very helpful! Thank you.

    0
  24. 36

    Geez, I think I need a rework of my website now. hah. This was well written and easy to follow – well I got the gist of it, not being a coder. Thank you.

    0
  25. 37

    The black cat more beautiful than the other one and what do you think?

    0
  26. 38

    Helpful, thanks

    0
  27. 39

    There is definately a lot to find out about this topic. I love all of the points you have made.

    0
  28. 40

    I’m impressed, I have to admit. Rarely do I come across a blog that’s both educative and amusing, and let me tell you, you’ve hit the nail on the head. The issue is something which not enough folks are speaking intelligently about. I am very happy I stumbled across this in my search for something regarding this.

    0
  29. 41

    Aw, this was an extremely good post. Taking a few minutes and actual effort to produce a superb article… but what can I say… I put things off a whole lot and don’t seem to get nearly anything done.

    0
  30. 42

    I needed to thank you for this good read!! I absolutely enjoyed every little bit of it. I have you saved as a favorite to check out new stuff you post…

    0
  31. 43

    Roberto Scarciello

    July 16, 2012 12:03 am

    Thank you so much!

    It’s exactly what I need.

    0
  32. 44

    Great article for HTML5 users. I have converted my videos to WebM format using Video Converter Assist, and follow your codes to embed the videos into my webpage and it is working now. Thank you very much!

    0
  33. 45

    Can I do this live?

    0

↑ Back to top