当前位置: 首页 > news >正文

html中引入视频的方法

方法一:video标签

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

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

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

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="videoBtn" style="max-width:500px;"><video controls="false"  muted="muted" id="video1" name="media" style="width:500px; height: 200px;"><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></video></div><script>var myVideo = document.getElementById("video1");var videoBtn = document.getElementById("videoBtn");myVideo.loop = truevideoBtn.onmouseleave = function () {myVideo.pause();}videoBtn.onmousemove = function () {myVideo.play();}function getVideoTime() {if (document.getElementById('video1')) {let videoPlayer = document.getElementById('video1');videoPlayer.addEventListener('timeupdate', function () {console.log(`当前的时间点是${videoPlayer.currentTime},视频长度是${videoPlayer.duration}`);if (videoPlayer.currentTime > 11) {myVideo.pause();videoPlayer.currentTime = 0}}, false)}}getVideoTime();</script>
</body></html>

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

方法二:embed标签

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

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

方法三:object标签

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

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

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

 

http://www.xdnf.cn/news/814015.html

相关文章:

  • Linux内存调试工具初探-MEMWATCH
  • GitHub和码云上,7个 h5 页面制作工具推荐
  • 11.20 《第二家园》上线内测
  • linux网络编程 copymemory,在VB6中用CopyMemory拷贝字符串的种种猫腻(一)
  • html爱心代码
  • SET QUOTED_IDENTIFIER OFF
  • 占座网失败原因分析
  • 程序员入门教程【非常详细】从零基础入门到精通,看完这一篇就够了 !
  • C#WebMVCLayui实战之《新闻管理系统》(适合初学者)
  • 服务器Hot Spare热备
  • 分页查询研究
  • 信息检索相关任务及数据集介绍
  • Android5 高级教程(三)
  • 英语词根词缀总结整合版
  • nginx配置使用笔记:三
  • 震撼!国产自研多环境开发软件 CEC-IDE 问世!遥遥领先!
  • C标准、C标准库、C++标准、C++标准库
  • 10个用于Android开发的有用的Kotlin库及示例
  • SMTP、ESMTP、POP3发送接收邮件
  • 启动应用程序出现mfc71u.dll找不到问题解决
  • PropertyGrid 用法,还没明白呢.
  • linux_i2c驱动架构(史上最全) davinc dm368 i2c驱动分析
  • 【数学建模】基于matlab模拟报童问题仿真
  • uefi和legacy的区别对比
  • C#中当程序的访问权限不足时,Directory.Exists和File.Exists方法不会抛出异常报错...
  • Windows server 2012R2下IIS服务器的配置与管理
  • 局域网电脑入侵
  • Linux---Shell(使用技巧 与 变量)
  • 事件对象
  • 使用SWFUpload上传文件