mozilla

Compare Revisions

Using HTML5 audio and video

Change Revisions

Revision 7250:

Revision 7250 by Sheppy on

Revision 7251:

Revision 7251 by siam85 on

Title:
Using HTML5 audio and video
Using HTML5 audio and video
Slug:
Using_HTML5_audio_and_video
Using_HTML5_audio_and_video
Tags:
HTML, NeedsExample, video, Media, audio, Ogg, HTML5
HTML, NeedsExample, video, Media, audio, Ogg, HTML5
Content:

Revision 7250
Revision 7251
nn12    </p>
13    <p>
14      <span class="short_text" id="result_box" lang="en"><span cl
 >ass="hps" title="คลิกเพื่อดูคำแปลอื่น">Welcome to</span> <span cl
 >ass="hps" title="คลิกเพื่อดูคำแปลอื่น">my</span> <span class="hps
 >" title="คลิกเพื่อดูคำแปลอื่น">life</span><span title="คลิกเพื่อด
 >ูคำแปลอื่น">.</span> <span class="hps" title="คลิกเพื่อดูคำแปลอื่
 >น">And last</span> <span class="hps" title="คลิกเพื่อดูคำแปลอื่น"
 >>longer</span><span title="คลิกเพื่อดูคำแปลอื่น">.</span><br></sp
 >an>Most people with health problems that they solve the case. I w
 >as sick to see a doctor only. The symptoms of the disease. If thi
 >s does not solve the root causes. Symptoms of the disease is cure
 >d, there was no way to fix it is. The body. Has high immunity to 
 >protect themselves.<a href="/En/Media_formats_supported_by_the_au
 >dio_and_video_elements" title="En/Media formats supported by the 
 >audio and video elements">supported by the audio and video elemen
 >ts</a>.
tt455    <h2>
456      Controlling media playback
457    </h2>
458    <p>
459      Once you've embedded media into your HTML&nbsp;document usi
 >ng the new elements, you can programmatically control them from y
 >our JavaScript code.&nbsp; For example, to start (or restart) pla
 >yback, you can do this:
460    </p>
461    <pre class="brush: js">
462var v = document.getElementsByTagName("video")[0];
463v.play();
464</pre>
465    <p>
466      The first line fetches the first video element in the docum
 >ent, and the second calls the element's <a class="internal" href=
 >"/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" tit
 >le="en/nsIDOMHTMLMediaElement#play()"><code>play()</code></a>&nbs
 >p;method, as defined in the {{ interface("nsIDOMHTMLMediaElement"
 >) }} interface that is used to implement the media elements.
467    </p>
468    <h2>
469      Stopping the download of media
470    </h2>
471    <p>
472      While stopping the playback of media is as easy as calling 
 >the element's pause()&nbsp;method, the browser will keep download
 >ing the media until the media element is disposed of through garb
 >age collection
473    </p>
474    <p>
475      Here's a trick that will stop the download at once:
476    </p>
477    <pre class="brush: js">
478var mediaElement = document.getElementById("myMediaElementID");
479mediaElement.pause();
480mediaElement.src = ""; 
481</pre>
482    <p>
483      By setting the media element's <code>src</code> attribute t
 >o an empty string, you destroy the element's internal decoder, wh
 >ich stops the network download.
484    </p>
485    <h2>
486      Media events
487    </h2>
488    <p>
489      Various events are sent when handling media; this section l
 >ists them and provides some helpful information about using them.
490    </p>
491    <div class="geckoVersionNote">
492      <p>
493        {{ gecko_callout_heading("2.0") }}
494      </p>
495      <p>
496        Prior to Gecko 2.0 {{ geckoRelease("2.0") }}, these event
 >s bubbled, even though they weren't supposed to; they no longer d
 >o.
497      </p>
498    </div>
499    <table class="standard-table">
500      <tbody>
501        <tr>
502          <th>
503            Event name
504          </th>
505          <th>
506            Description
507          </th>
508        </tr>
509        <tr>
510          <td>
511            <code>abort</code>
512          </td>
513          <td>
514            Sent when playback is aborted; for example, if the me
 >dia is playing and is restarted from the beginning, this event is
 > sent.
515          </td>
516        </tr>
517        <tr>
518          <td>
519            <code>canplay</code>
520          </td>
521          <td>
522            Sent when enough data is available that the media can
 > be played, at least for a couple of frames.&nbsp; This correspon
 >ds to the <code>CAN_PLAY</code>&nbsp;<code>readyState</code>.
523          </td>
524        </tr>
525        <tr>
526          <td>
527            <code>canplaythrough</code>
528          </td>
529          <td>
530            Sent when the ready state changes to <code>CAN_PLAY_T
 >HROUGH</code>, indicating that the entire media can be played wit
 >hout interruption, assuming the download rate remains at least at
 > the current level.
531          </td>
532        </tr>
533        <tr>
534          <td>
535            <code>canshowcurrentframe</code>
536          </td>
537          <td>
538            The current frame has loaded and can be presented.&nb
 >sp; This corresponds to the <code>CAN_SHOW_CURRENT_FRAME</code>&n
 >bsp;<code>readyState</code>.
539          </td>
540        </tr>
541        <tr>
542          <td>
543            <code>dataunavailable</code>
544          </td>
545          <td>
546            Sent when the ready state changes to <code>DATA_UNAVA
 >ILABLE</code>.
547          </td>
548        </tr>
549        <tr>
550          <td>
551            <code>durationchange</code>
552          </td>
553          <td>
554            The metadata has loaded or changed, indicating a chan
 >ge in duration of the media.&nbsp; This is sent, for example, whe
 >n the media has loaded enough that the duration is known.
555          </td>
556        </tr>
557        <tr>
558          <td>
559            <code>emptied</code>
560          </td>
561          <td>
562            The media has become empty; for example, this event i
 >s sent if the media has already been loaded (or partially loaded)
 >, and the <a class="internal" href="/En/XPCOM_Interface_Reference
 >/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>
 >load()</code></a>&nbsp;method is called to reload it.
563          </td>
564        </tr>
565        <tr>
566          <td>
567            <code>empty</code>
568          </td>
569          <td>
570            Sent when an error occurs and the media is empty.
571          </td>
572        </tr>
573        <tr>
574          <td>
575            <code>ended</code>
576          </td>
577          <td>
578            Sent when playback completes.
579          </td>
580        </tr>
581        <tr>
582          <td>
583            <code>error</code>
584          </td>
585          <td>
586            Sent when an error occurs.&nbsp; The element's <code>
 >error</code> attribute contains more information. See {{ anch("Er
 >ror handling") }} for details.
587          </td>
588        </tr>
589        <tr>
590          <td>
591            <code>loadeddata</code>
592          </td>
593          <td>
594            The first frame of the media has finished loading.
595          </td>
596        </tr>
597        <tr>
598          <td>
599            <code>loadedmetadata</code>
600          </td>
601          <td>
602            The media's metadata has finished loading; all attrib
 >utes now contain as much useful information as they're going to.
603          </td>
604        </tr>
605        <tr>
606          <td>
607            <code>loadstart</code>
608          </td>
609          <td>
610            Sent when loading of the media begins.
611          </td>
612        </tr>
613        <tr>
614          <td>
615            <code>mozaudioavailable</code> {{ gecko_minversion_in
 >line("2.0") }} {{ non-standard_inline() }}
616          </td>
617          <td>
618            Sent when an audio buffer is provided to the audio la
 >yer for processing; the buffer contains raw audio samples that ma
 >y or may not already have been played by the time you receive the
 > event.
619          </td>
620        </tr>
621        <tr>
622          <td>
623            <code>pause</code>
624          </td>
625          <td>
626            Sent when playback is paused.
627          </td>
628        </tr>
629        <tr>
630          <td>
631            <code>play</code>
632          </td>
633          <td>
634            Sent when playback of the media starts after having b
 >een paused; that is, when playback is resumed after a prior <code
 >>pause</code> event.
635          </td>
636        </tr>
637        <tr>
638          <td>
639            <code>playing</code>
640          </td>
641          <td>
642            Sent when the media begins to play (either for the fi
 >rst time, after having been paused, or after ending and then rest
 >arting).
643          </td>
644        </tr>
645        <tr>
646          <td>
647            <code>progress</code>
648          </td>
649          <td>
650            Sent periodically to inform interested parties of pro
 >gress downloading the media. Information about the current amount
 > of the media that has been downloaded is available in the media 
 >element's <code>buffered</code> attribute.
651          </td>
652        </tr>
653        <tr>
654          <td>
655            <code>ratechange</code>
656          </td>
657          <td>
658            Sent when the playback speed changes.
659          </td>
660        </tr>
661        <tr>
662          <td>
663            <code>seeked</code>
664          </td>
665          <td>
666            Sent when a seek operation completes.
667          </td>
668        </tr>
669        <tr>
670          <td>
671            <code>seeking</code>
672          </td>
673          <td>
674            Sent when a seek operation begins.
675          </td>
676        </tr>
677        <tr>
678          <td>
679            <code>suspend</code> {{ gecko_minversion_inline("1.9.
 >2") }}
680          </td>
681          <td>
682            Sent when loading of the media is suspended; this may
 > happen either because the download has completed or because it h
 >as been paused for any other reason.
683          </td>
684        </tr>
685        <tr>
686          <td>
687            <code>timeupdate</code>
688          </td>
689          <td>
690            The time indicated by the element's <code>currentTime
 ></code> attribute has changed.
691          </td>
692        </tr>
693        <tr>
694          <td>
695            <code>volumechange</code>
696          </td>
697          <td>
698            Sent when the audio volume changes (both when the vol
 >ume is set and when the <code>muted</code> attribute is changed).
699          </td>
700        </tr>
701        <tr>
702          <td>
703            <code>waiting</code>
704          </td>
705          <td>
706            Sent when the requested operation (such as playback) 
 >is delayed pending the completion of another operation (such as a
 > seek).
707          </td>
708        </tr>
709      </tbody>
710    </table>
711    <p>
712      {{ gecko_minversion_note("1.9.2", "Gecko 1.9.2 removed the 
 ><code>load</code> event, which was not fired reliably and in fact
 > should not be used.") }}
713    </p>
714    <p>
715      You can easily watch for these events, using code such as t
 >he following:
716    </p>
717    <pre class="brush: js">
718var v = document.getElementsByTagName("video")[0];
719v.addEventListener("seeked", function() { document.getElementsByT
 >agName("video")[0].play(); }, true);
720v.currentTime = 10.0;
721</pre>
722    <p>
723      This example fetches the first video element in the documen
 >t and attaches an event listener to it, watching for the seeked e
 >vent, which is sent whenever a seek operation completes.&nbsp; Th
 >e listener simply calls the element's <code>play()</code> method,
 > which starts playback.
724    </p>
725    <p>
726      Then, in line 4, the example sets the element's <code>curre
 >ntTime</code> attribute to 10.0, which initiates a seek operation
 > to the 10-second mark in the media.&nbsp; This causes a <code>se
 >eking</code> event to be sent when the operation begins, then a <
 >code>seeked</code> event to be dispatched when the seek is comple
 >ted.
727    </p>
728    <p>
729      In other words, this example seeks to the 10-second mark in
 > the media, then begins playback as soon as that's finished.
730    </p>
731    <h2>
732      Fallback options
733    </h2>
734    <p>
735      HTML included between, for example, the <code>&lt;video&gt;
 ></code> and <code>&lt;/video&gt;</code> tags is processed by brow
 >sers that don't support HTML&nbsp;5 media. You can take advantage
 > of this fact to provide alternative fallback media for those bro
 >wsers.
736    </p>
737    <p>
738      This section provides two possible fallback options for vid
 >eo. In each case, if the browser supports HTML&nbsp;5 video, that
 > is used; otherwise, the fallback option is used.
739    </p>
740    <h3>
741      Using Flash
742    </h3>
743    <p>
744      You can use Flash to play a Flash format movie if the {{ HT
 >MLElement("video") }} element isn't supported:
745    </p>
746    <pre class="brush: html">
747&lt;video src="video.ogv" controls&gt;
748    &lt;object data="flvplayer.swf" type="application/x-shockwave
 >-flash"&gt;
749      &lt;param value="flvplayer.swf" name="movie"/&gt;
750    &lt;/object&gt;
751&lt;/video&gt;
752</pre>
753    <p>
754      Note that you shouldn't include <code>classid</code> in the
 > <code>object</code> tag in order to be compatible with browsers 
 >other than&nbsp;Internet Explorer.
755    </p>
756    <h3>
757      Playing Ogg videos using a Java applet
758    </h3>
759    <p>
760      There's a Java applet called <a class="external" href="http
 >://maikmerten.livejournal.com/2256.html" title="http://maikmerten
 >.livejournal.com/2256.html">Cortado</a> that you can use as a fal
 >lback to play Ogg videos in browsers that have Java support but d
 >on't support HTML&nbsp;5 video:
761    </p>
762    <pre class="brush: html">
763&lt;video src="my_ogg_video.ogg" controls width="320" height="240
 >"&gt;
764  &lt;object type="application/x-java-applet"
765          width="320" height="240"&gt;
766     &lt;param name="archive" value="cortado.jar"&gt;
767     &lt;param name="code" value="com.fluendo.player.Cortado.clas
 >s"&gt;
768     &lt;param name="url" value="my_ogg_video.ogg"&gt;
769     &lt;p&gt;You need to install Java to play this file.&lt;/p&g
 >t;
770  &lt;/object&gt;
771&lt;/video&gt;
772</pre>
773    <p>
774      If you do not create an alternate child element of the cort
 >ado object element, such as the {{ HTMLElement("p") }} element ab
 >ove, FireFox 3.5 installs that handle the video natively but do n
 >ot have Java installed will incorrectly inform the user that they
 > need to install a plugin to view content on the page.
775    </p>
776    <p>
777      {{ h1_gecko_minversion("Error handling", "2.0") }}
778    </p>
779    <p>
780      Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, error hand
 >ling has been revised to match the latest version of the HTML5 sp
 >ecification. Instead of the <code>error</code> event being dispat
 >ched to the media element itself, it now gets delivered to the ch
 >ild {{ HTMLElement("source") }} elements corresponding to the sou
 >rces resulting in the error.
781    </p>
782    <p>
783      This lets you detect which sources failed to load, which ma
 >y be useful. Consider this HTML:
784    </p>
785    <pre class="brush: html">
786&lt;video&gt;
787&lt;source id="mp4_src"
788        src="video.mp4"
789        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
790&lt;/source&gt;
791&lt;source id="3gp_src"
792        src="video.3gp"
793        type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
794&lt;/source&gt;
795&lt;source id="ogg_src"
796        src="video.ogv"
797        type='video/ogg; codecs="theora, vorbis"'&gt;
798&lt;/source&gt;
799&lt;/video&gt;
800</pre>
801    <p>
802      Since Firefox doesn't support MP4 and 3GP due to their pate
 >nt-encumbered nature, the {{ HTMLElement("source") }} elements wi
 >th the IDs "mp4_src" and "3gp_src"&nbsp;will receive <code>error<
 >/code> events before the Ogg resource is loaded. The sources are 
 >tried in the order in which they appear, and once one loads succe
 >ssfully, the remaining sources aren't tried at all.
803    </p>
804    <h3>
805      Detecting when no sources have loaded
806    </h3>
807    <p>
808      To detect that all child {{ HTMLElement("source") }}&nbsp;e
 >lements have failed to load, check the value of the media element
 >'s <code>networkState</code> attribute. If this is <code>HTMLMedi
 >aElement.NETWORK_NO_SOURCE</code>, you know that all the sources 
 >failed to load.
809    </p>
810    <p>
811      If at that point you add another source by inserting a new 
 >{{ HTMLElement("source") }}&nbsp;element as a child of the media 
 >element, Gecko will attempt to load the specified resource.
812    </p>
813    <h2>
814      See also
815    </h2>
816    <ul>
817      <li>The media-related HTML elements: {{ HTMLElement("audio"
 >) }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};
818      </li>
819      <li>
820        <a class="internal" href="/En/Manipulating_video_using_ca
 >nvas" title="En/Manipulating video using canvas">Manipulating vid
 >eo using canvas</a>
821      </li>
822      <li>
823        <a href="/en/Introducing_the_Audio_API_Extension" title="
 >en/Introducing the Audio API Extension">Introducing the Audio API
 > Extension</a>
824      </li>
825      <li>{{ interface("nsIDOMHTMLMediaElement") }}
826      </li>
827      <li>
828        <a class="internal" href="/En/Media_formats_supported_by_
 >the_audio_and_video_elements" title="En/Media formats supported b
 >y the audio and video elements">Media formats supported by the au
 >dio and video elements</a>
829      </li>
830      <li>
831        <a class="external" href="http://en.flossmanuals.net/Theo
 >raCookbook" title="http://en.flossmanuals.net/TheoraCookbook">The
 >ora Cookbook</a>
832      </li>
833      <li>
834        <a class=" external" href="http://www.html5video.org/kalt
 >ura-html5/" title="http://www.html5video.org/kaltura-html5/">Kalt
 >ura Video Library Solution</a>, a JavaScript library (mwEmbed) wh
 >ich supports a seamless fallback with HTML5, VLC Player, Java Cor
 >tado and OMTK Flash Vorbis player. (It is used by Wikimedia)
835      </li>
836      <li>
837        <a class=" external" href="http://omtk.org/flash/index.ht
 >ml" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, a 
 >Flash library which implements a Vorbis decoder
838      </li>
839      <li>
840        <a class=" external" href="http://www.projekktor.com" tit
 >le="http://www.projekktor.com">Projekktor Player</a>, a JavaScrip
 >t wrapper for audio- and video-tags with flash fallback, open sou
 >rce, GPL
841      </li>
842      <li>
843        <a class=" external" href="http://www.theora.org/cortado/
 >" title="http://www.theora.org/cortado/">Applet Cortado</a>, an a
 >udio/video playback solution in Java maintained by Xiph.org
844      </li>
845    </ul>
846    <p>
847      {{ HTML5ArticleTOC() }}
848    </p>
849    <p>
850      {{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans
 >_Firefox", "es": "es/Usando_audio_y_video_en_Firefox" } ) }}
851    </p>

Back to History