17 Chapter Video/Audio API 17-1 <video> <audio> 17-2 <video> <audio>

Size: px

Start display at page:

Download "17 Chapter Video/Audio API 17-1 <video> <audio> 17-2 <video> <audio>"

星宫
4 years ago
Views:

1 17 Chapter 17-1 <video> <audio> 17-2 <video> <audio>

2 網頁程式設計 17-1 <video> <audio> <video> <audio> API HTMLMediaElement <audio> width heightposter <video> <audio> ( HTML 5 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

3 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

4 網頁程式設計 JavaScript <video> [ ] [ ]

5 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> onclick playvideo() JavaScript 07 ~ 14 playvideo() 08 myvideourl 10 <video> src 11 <video> controls true 12 <video> load() 13 <video> play() 17-5

6 網頁程式設計 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

7 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

8 網頁程式設計 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

9 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

10 網頁程式設計 [ ]

Web 前端开发课程理论教学部分第九讲 : 音频与视频学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法

Web 前端开发课程理论教学部分第九讲 : 音频与视频学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法 Web 前端开发课程理论教学部分第九讲 : 音频与视频学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法 5 video 和 audio 的事件 6 案例: 拍个 DV 让大家看 7 讨论与思考互联网的飞速发展和网络速度的改善,