Compare Revisions

Using HTML5 audio and video

Change Revisions

Revision 7250:

Revision 7250 by Sheppy on

Revision 7251:

Revision 7251 by siam85 on

Using HTML5 audio and video
Using HTML5 audio and video
HTML, NeedsExample, video, Media, audio, Ogg, HTML5
HTML, NeedsExample, video, Media, audio, Ogg, HTML5

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
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];;
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
 >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");
480mediaElement.src = ""; 
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
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
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
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
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;
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
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
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
749      &lt;param value="flvplayer.swf" name="movie"/&gt;
750    &lt;/object&gt;
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
 >://" title="http://maikmerten
 >">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
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
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
770  &lt;/object&gt;
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">
787&lt;source id="mp4_src"
788        src="video.mp4"
789        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
791&lt;source id="3gp_src"
792        src="video.3gp"
793        type='video/3gpp; codecs="mp4v.20.8, samr"'&gt;
795&lt;source id="ogg_src"
796        src="video.ogv"
797        type='video/ogg; codecs="theora, vorbis"'&gt;
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="
 >raCookbook" title="">The
 >ora Cookbook</a>
832      </li>
833      <li>
834        <a class=" external" href="
 >ura-html5/" title="">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="
 >ml" title="">OMTK - Flash</a>, a 
 >Flash library which implements a Vorbis decoder
838      </li>
839      <li>
840        <a class=" external" href="" tit
 >le="">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="
 >" title="">Applet Cortado</a>, an a
 >udio/video playback solution in Java maintained by
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