首页 前端知识 html插入视频的方法

html插入视频的方法

2024-06-20 00:06:46 前端知识 前端哥 790 72 我要收藏

方法一:video标签

用于在html元素中添加视频元素

 
  1. <video controls >

  2. <source src="视频路径" type="video/视频格式">

  3. </video>

我引入视频就是使用这个标签,但是我使用视频的的属性并不多,只是使用了简单的播放暂停,至于其他的属性可能现在没有怎么使用,以后需要继续用一下。

 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3.  
  4. <head>

  5. <meta charset="UTF-8">

  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">

  8. <title>Document</title>

  9. </head>

  10.  
  11. <body>

  12. <div id="videoBtn" style="max-width:500px;">

  13. <video controls="false" muted="muted" id="video1" name="media" style="width:500px; height: 200px;">

  14. <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">

  15. </video>

  16. </div>

  17. <script>

  18. var myVideo = document.getElementById("video1");

  19. var videoBtn = document.getElementById("videoBtn");

  20. myVideo.loop = true

  21. videoBtn.onmouseleave = function () {

  22. myVideo.pause();

  23. }

  24. videoBtn.onmousemove = function () {

  25. myVideo.play();

  26. }

  27. function getVideoTime() {

  28. if (document.getElementById('video1')) {

  29. let videoPlayer = document.getElementById('video1');

  30. videoPlayer.addEventListener('timeupdate', function () {

  31. console.log(`当前的时间点是${videoPlayer.currentTime},视频长度是${videoPlayer.duration}`);

  32. if (videoPlayer.currentTime > 11) {

  33. myVideo.pause();

  34. videoPlayer.currentTime = 0

  35. }

  36. }, false)

  37. }

  38. }

  39. getVideoTime();

  40. </script>

  41. </body>

  42.  
  43. </html>

至于我使用的时候有个时间点,和视频长度,本来就是想着这个属性是不是能用来做那个视频的播放条那个东西。controls 属性设置或返回浏览器应当显示标准的视频控件(播放,暂停,进度条,音量,全屏切换,字幕,轨道)。true-指定显示控件,false-指定不显示。

方法二:embed标签

用于在html元素中嵌入多媒体元素

<embed src="视频路径" />

方法三:object标签

同方法二一样在html中嵌入多媒体元素

<object data="视频地址"/>

方法二和方法三是不常用的。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12892.html
标签
评论
发布的文章

在线OJ项目

2024-08-27 21:08:43

JSON2YOLO 项目教程

2024-08-27 21:08:42

Redis 实现哨兵模式

2024-08-27 21:08:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!