10
0

3_媒体标签.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. video{
  9. /* width: 200px; */
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <a href="https://www.runoob.com/tags/ref-av-dom.html">dom控制</a>
  15. <video id="videotag" width="200" src="./media/media.mp4" ></video>
  16. <button id="paly-btn">播放</button>
  17. <button onclick="pausedFun()" id="paused-btn">暂停</button>
  18. <audio id="audio-dom" src="./media/song.mp3" ></audio>
  19. <script>
  20. var audioDom = document.getElementById("audio-dom");
  21. var oVideo = document.getElementById("videotag");
  22. var playBtn = document.getElementById("paly-btn");
  23. var pausedBtn = document.getElementById("paused-btn");
  24. playBtn.onclick = function(){
  25. // oVideo.play();
  26. audioDom.play()
  27. }
  28. function pausedFun(){
  29. oVideo.pause();
  30. }
  31. oVideo.onplay = function(e){
  32. console.log("hello")
  33. }
  34. </script>
  35. </body>
  36. </html>