17 Chapter 17-1 <video> <audio> 17-2 <video> <audio>
網頁程式設計 17-1 <video> <audio> <video> <audio> API HTMLMediaElement <audio> width heightposter <video> <audio> ( HTML 5 http://www.w3.org/tr/html5/) error ( ) src ( ) currentsrc ( ) networkstate ( ) preload ( ) buffered ( ) load() ( ) initialtime ( ) currenttime ( ) duration ( ) MEDIA_ERR_ABORTED (1) MEDIA_ERR_NETWORK (2) MEDIA_ERR_DECODE (3) MEDIA_ERR_SRC_NOT_SUPPORTED (4) NETWORK_EMPTY (0) NETWORK_IDLE (1) NETWORK_LOADING (2) NETWORK_NO_SOURCE (3) TimeRanges ( TimeRanges lengthstartend ) ( ) 17-2
17 readystate ( ) paused ( ) defaultplaybackrate ( ) playbackrate ( ) played ( ) seekable ( ) ended ( ) autoplay ( ) loop ( ) play() ( ) pause() ( ) controls ( ) volume ( ) muted ( ) defaultmuted ( ) audiotracks ( ) videotracks ( ) canplaytype(type) ( ) HAVE_NOTHING (0) HAVE_METADATA (1) metadata HAVE_CURRENT_DATA (2) HAVE_FUTURE_DATA (3) HAVE_ENOUGH_DATA (4) true false 1.0 TimeRanges TimeRanges true false true false true false true false 0.0 ( ) ~ 1.0 ( ) true false true false AudioTrackList VideoTrackList ""( ) type "application/octet-stream" type probably type codecs maybe type codecs 17-3
網頁程式設計 JavaScript <video> [ ] 1 2 1 [ ] 2 17-4
17 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> </title> 06: <script> 07: function playvideo() { 08: var myvideourl = document.getelementbyid("myvideourl").value; 09: var myvideo = document.getelementbyid("myvideo"); 10: myvideo.src = myvideourl; 11: myvideo.controls = true; 12: myvideo.load(); 13: myvideo.play(); 14: } 15: </script> 16: </head> 17: <body> 18: <input type="text" id="myvideourl"> 19: <input type="button" value=" " onclick="playvideo()"> 20: <video id="myvideo"></video> 21: </body> 22:</html> <\Ch17\video5.html> 18 19 onclick playvideo() JavaScript 07 ~ 14 playvideo() 08 myvideourl 10 <video> src 11 <video> controls true 12 <video> load() 13 <video> play() 17-5
網頁程式設計 17-2 <video> <audio> <video> <audio> ( HTML 5 ) loadstart progress suspend abort error emptied stalled loadedmetadata loadeddata canplay canplaythrough networkstate NETWORK_ LOADING networkstate NETWORK_ LOADING networkstate NETWORK_ IDLE networkstate NETWORK_EMPTY NETWORK_IDLE networkstate NETWORK_EMPTY NETWORK_IDLE networkstate NETWORK_EMPTY NETWORK_EMPTY networkstate NETWORK_LOADING metadata readystate HAVE_METADATA (render) readystate HAVE_CURRENT_DATA readystate HAVE_FUTURE_DATA readystate HAVE_ENOUGH_DATA 17-6
17 1. emptied 2. loadstart 3. loadedmetadata 4. loadeddata 5. canplay 6. canplaythrough error suspend abort stalled progress ( HTML 5 ) play playing timeupdate waiting seeking seeked volumechange play() aotuplay paused false ( ) readystate HAVE_FUTURE_DATA (frame) readystate HAVE_ CURRENT_DATA paused falseseeking true ( ) seeking true seeking false volume muted 17-7
網頁程式設計 ended durationchange pause ratechange ended true duration pause() pause paused true playbackrate 1. play 2. playing 3. timeupdate ( ) 4. ended JavaScript <video> <\Ch17\video5.html> <video> ended 01:<!doctype html> 02:<html> 03: <head> 04: <meta charset="utf-8"> 05: <title> </title> <\Ch17\video6.html>( 1/2) 17-8
17 06: <script> 07: function playvideo() { 08: var myvideourl = document.getelementbyid("myvideourl").value; 09: var myvideo = document.getelementbyid("myvideo"); 10: myvideo.src = myvideourl; 11: myvideo.controls = true; 12: myvideo.load(); 13: myvideo.play(); 14: myvideo.addeventlistener("ended", function() { 15: var showtime = document.getelementbyid("showtime"); 16: showtime.innerhtml = " " + myvideo.duration + " "; 17: }, false); 18: } 19: </script> 20: </head> 21: <body> 22: <input type="text" id="myvideourl"> 23: <input type="button" value=" " onclick="playvideo()"> 24: <video id="myvideo"></video> 25: <p id="showtime"></p> 26: </body> 27:</html> <\Ch17\video6.htm> ( 2/2) 25 id "showtime" 14 ~ 17 addeventlistener() ended 16 <video> duration addeventlistener() event function usecapture false event addeventlistener(event, function [, usecapture]) 17-9
網頁程式設計 1 2 3 1 [ ] 3 2 17-10