<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>html video 视频</title> </head> <body> <div style="text-align:center"> <button οnclick="playPause()">播放/暂停</button> <button οnclick="makeBig()">放大</button> <button οnclick="makeSmall()">缩小</button> <button οnclick="makeNormal()">普通</button> <br> <video id="video1" width="420" controls> <source src="video/视频1.mp4" type="video/mp4"> <source src="video/视频2.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。 </video> </div> <script> /*参考:https://www.runoob.com/html/html5-video.html * 知识点: * 1.video 是行内元素,但是 支持设置 width。 * 2.myVideo.paused 当前视频的状态:播放/暂停(播放前,播放完后都算暂停)。 * 3.myVideo.played -> TimeRanges {length: 1} 播放时长 1 min 以内? * 4.myVideo.onplay 播放事件。myVideo.onpause 暂停事件。myVideo.onended 播放完事件(此事件会先触发暂停事件)。*/ let myVideo = document.getElementById("video1"); myVideo.onplay = function () { console.log("playing"); }; myVideo.onpause = function () { console.log("paused"); }; myVideo.onended = function () { console.log("ended"); }; function playPause() { if (myVideo.paused) { myVideo.play(); // console.log("myVideo.paused:", myVideo.paused); // console.log(myVideo.played); } else { myVideo.pause(); } } function makeBig() { myVideo.width = 520; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } </script> </body> </html>
html video 视频.html
最新推荐文章于 2024-06-12 15:33:32 发布