2. IT
    3. HTML AudioVideo DOM timeupdate 事件，play()方法

    HTML AudioVideo DOM timeupdate 事件，play()方法

    xiaoxiao2025-03-06  19

    HTML 5 <audio> 标签

    定义和用法

    <audio> 标签定义声音，比如音乐或其他音频流。

    属性

    属性 值 描述 autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 loop loop 如果出现该属性，则每当音频结束时重新开始播放。 preload preload

    如果出现该属性，则音频在页面加载时进行加载，并预备播放。

    如果使用 "autoplay"，则忽略该属性。

    src url 要播放的音频的 URL。

    实例

    带有浏览器默认控件的 audio 元素：

    <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>

    HTML 5 <video> 标签

    定义和用法

    <video> 标签定义视频，比如电影片段或其他视频流。

    属性

    属性 值 描述 autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。 controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 preload preload

    如果出现该属性，则视频在页面加载时进行加载，并预备播放。

    如果使用 "autoplay"，则忽略该属性。

    src url 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。

    实例

    一段简单的 HTML5 视频：

    <video src="movie.ogg" controls="controls"> 您的浏览器不支持 video 标签。 </video>

    HTML Audio/Video DOM timeupdate 事件

    定义和用法

    timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。

    该事件可以在以下情况被调用:

    播放音频/视频（audio/video） 移动音频/视频（audio/video）播放位置（即播放时刻点被改变，例如拖动了播放进度条）

    提示： timeupdate 事件通常与 Audio/Video 对象的 currentTime 属性一起使用，该属性返回音频/视频（audio/video）的播放位置（以秒计）。

    语法

    HTML 中：

    < audio|video οntimeupdate=" myScript"> 尝试一下

    JavaScript 中：

    audio|video.οntimeupdate=function(){ myScript}; 尝试一下

    JavaScript 中, 使用 addEventListener() 方法:

    audio|video.addEventListener("timeupdate",  myScript); 尝试一下

    注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

    实例

    当视频播放位置已经改变，显示视频当前播放位置（一秒计）:

    <body> <p>该实例中，我们使用了 HTML DOM 为 video 元素添加 "ontimeupdate" 事件。 在用户开始播放视频，或者移动视频的播放位置时触发函数，并显示视频的播放位置。</p> <video id="myVideo" width="320" height="176" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> <p>播放位置: <span id="demo"></span></p> <script> // 获取 id="myVideo" 的 video 元素 var vid = document.getElementById("myVideo"); // 为 video 元素添加 ontimeupdate 事件，如果当前播放位置改变则执行函数 vid.ontimeupdate = function() {myFunction()}; function myFunction() { // 显示 id="demo" 的 p 元素中视频的播放位置 document.getElementById("demo").innerHTML = vid.currentTime; } </script> </body>

    HTML 5 Audio/Video DOM play() 方法

    定义和用法

    play() 方法开始播放当前的音频或视频。

    HTML 5 Audio/Video DOM pause() 方法

    定义和用法

    pause() 方法停止（暂停）当前播放的音频或视频。

    实例

    带有播放和暂停按钮的一段视频：

    <body> <button οnclick="playVid()" type="button">播放视频</button> <button οnclick="pauseVid()" type="button">暂停视频</button> <br /> <br /> <video id="video1"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4"> <source src="/example/html5/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <script> var myVideo=document.getElementById("video1"); function playVid() { myVideo.play(); } function pauseVid() { myVideo.pause(); } </script> </body>

    转自 菜鸟教程

    转载请注明原文地址: https://ju.6miu.com/read-1296926.html
    最新回复(0)