如何在html中加入视频

2023-11-07

第一步:首先下载video.js,百度一下就能找到。


这个是下载后的目录。


第二步:先把要用到的js\css\swf都加载到html页面上。

如:

<link href="video-js/video-js.css" rel="stylesheet" type="text/css">

<script src="video-js/video.js"></script>

<script>

videojs.options.flash.swf = "video-js/video-js.swf";

</script>


第三步:加入下面的代码:

<video id="my_video_1" class="video-js vjs-default-skin" controls    preload="auto"width="640"height="480"poster="video-js/my_video_poster.png"    data-setup="{}">

<source src="Wildlife.mp4" type='video/mp4'> 

</video>


只要记住:修改width="640" height="480"来改变视频显示大小,修改src="Wildlife.mp4"来改变要显示的视频。

第四步:然后打开html文件查看效果吧,它有暂停、音量控制、全屏等功能,还有好多其他功能,比如字幕等,这个以后再写。



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在html中加入视频 的相关文章

  • 如何在input标签中写入提示信息

    在input中写入提示信息 需要用到HTML5中的placeholder属性
  • JavaScript读取json文件

  • 前端性能优化

    页面的性能指标 DCL DOMContentLoaded DOM解析完毕 FP First Paint 表示渲染出第一个像素点 FP一般在HTML解析完成或者解析一部分时候触发 FCP First Contentful Paint 表示渲染
  • 2023年前端面试题集锦

    2023年又是行情惨淡的一年 为此我从 枇杷村IT面试宝典 小程序里收集了一些题目 更多题目可以扫下方二维码查看 现做个总结如下 1 在JavaScript中 0 0的结果是什么 结果为true 严格等于比较的是值和类型 对象除外 只要值和
  • web前端基础:HTML文字和段落标签

    标题标签 h1 h1 h6 h6 段落标签 p p align对齐属性值 值 描述 left 左对齐 right 右对齐 center 居中对齐 justify 对行进行伸展 每行可以有相等的长度 列表标签 有序列表 ol li 列表项 l
  • 使用Chrome浏览器自带命令对web页面进行截图,生产高质量图片

    在平时工作中 我们对浏览器的web页面截图有很多方法 无论是Windows还是Mac操作系统 都自带截图工具 但是 如果我们打开的web页面非常的大 我使用操作系统自带的截屏工具就力不从心了 因为我们的显示屏幕不能显示web页面的所有内容
  • WAMP环境隐藏PHP文件实际路径和后缀名

    有时候做客户端开发阶段得测试 需要一个模拟服务器的环境 我使用得最顺手得还是WAMP环境 后台给出的api接口的路径千奇百怪 在WAMP环境中如何模拟这些路径呢 如何将某个路径下的PHP文件映射到另一个URL路径下并隐藏PHP文件后缀呢 在
  • web前端面试题整理(前端和计算机相关知识)

    1 你能描述一下渐进增强和优雅降级之间的不同吗 定义 优雅降级 graceful degradation 一开始就构建站点的完整功能 然后针对浏览器测试和修复 渐进增强 progressive enhancement 一开始只构建站点的最少
  • input标签是什么?input标签属性有哪些

    input标签属于什么标签 input标签属性有哪些 相信刚接触的表单的小白应该很陌生 那么接下来我们就来讲一下input标签属性有哪些 首先小编在这里谢谢大家一直的支持 每天都会更新十个web前端基础内容 需要的可以关注我 另外也可以进我
  • React 中ref的几种用法

    React 中ref的几种用法 1 字符串 通过 this refs a 来引用真实dom的节点 dom 节点上使用
  • Web前端——Javascript复习(数组)

    1 数组 1 程序 数据结构 算法 一个好的数据结构 可极大提高程序的执行效率 相关的多个数据应集中存储 管理 分类和排序 2 数组概念 一组连续的变量组成的集合 批量管理多个数据 创建 2 1 var 变量名 2 2 var 变量名 值1
  • web前端笔记:html5的标签

    在HTML4 01中 lt b gt lt i gt 是视觉要素 presentationl elements 分别表示无意义的加粗 无意义的斜体 表现样式为 font weight bolder 仅仅表示 这里应该用粗体显示 或者 这里应
  • 父容器display:flex后,子元素的内部元素height:100%无效解决方法

    父容器display flex后 子元素的内部元素height 100 无效解决方法 解救办法 父类容器position relative 子元素 position absolute width 100 height 100 效果图 代码如
  • 关于2018网易游戏web前端实习生面试经历

    去年报名的网易前端面试 没想到过了3个月居然收到了面试的通知 心里也是激动 花了一天时间面试 自己总结一下面试过的问题 问题可能不全 但是这些是我所能记起来的问题 一面 1 css高度坍塌 两个盒子 一个下边据20px 一个上边据50px
  • CSS 学习笔记(基础)

    用来控制网页表现的语言 CSS Cascading Style Sheet 层叠样式表 然后我们继续看看 W3C 标准 结构 HTML 表现 CSS 行为 JavaScript CSS导入方式 选择器 属性 由于网页的框架结构是由HTML实
  • 解决css中上下外边距(margin)在父元素中溢出的问题

    两个办法 给父元素添加overflow hidden 即可 给父元素添加透明边框border 1px solid transparent 给父元素添加伪元素 before after content display table 改变光标的颜
  • JS 时区时间转换

    业务场景 页面服务器时间是东八区时间 页面 JS 功能需要对比服务器时间和用户本地时间 为兼容世界各地时间 需要将用户本地时间转换为东八区时间 基本概念 格林威治时间 格林威治子午线上的地方时 或零时区 中时区 的区时叫做格林威治时间 也叫
  • 一眼看懂promise与async await的区别

    promise方法 let p1 new Promise resolve reject gt setTimeout gt resolve 我是p1 4000 let p2 new Promise resolve reject gt setT
  • hover时效果从中间向两边扩散

    header nav gt li position relative display inline block margin right 20px padding 0 5px font size 16px line height 76px
  • 禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹

    发现之前阻止页面滚动的代码e preventDefault代码失效了 于是自己折腾了一番 找到了解决办法 一 前言 浏览器在移动端有一个默认触摸滚动的效果 让我们感触最深的莫过于微信浏览器里面 下拉时自带橡皮筋的效果 然而在开发的时候我们经

随机推荐

  • vue动态合并行

    这个 处理数据 将表格数组传入 在获取到数组时调用 getSpanArr data this spanArr for var i 0 i lt data length i if i 0 this spanArr push 1 空数组 用来记
  • Linux下生成patch和打patch

    通过diff工具生成补丁 patch工具打上补丁 在使用diff之前 你需要保留一份未修改过的源码 然后在其它地方修改源码的一份拷贝 diff对比这两份源码生成patch 修改过的源码必须保留原来的文件名 例如 如果你修改源码中的a c文件
  • chinesecalendar 模块判断节假日

    chinesecalendar是python 中判断date类型的日期是工作日 还是节假日 比较准确地模块 先安装该模块 pip install chinesecalendar 导入模块的用法如下 import datetime from
  • PowerShell 基本知识

    常见的 powershell 攻击工具 PowerSploit powershell 后期漏洞利用框架 常用于信息探测 特权提升 凭证窃取 持久化等操作 Nishang 基于 PowerShell 的渗透测试专用工具 集成了框架 脚本和各种
  • Android 自定义控件+下拉选择框实现

    自定义控件 下拉选择框实现 当系统自带的控件不能满足我们的需求 而我们又会经常使用到 这个时候我们就可以自定义控件 下拉框是我们在做项目中经常会需要用到的 上图就是一个自定义的控件 点击显示下拉框进行选择 pop view xml 自定义控
  • docker-compose 部署JavaWeb

    目录结构 1 迅雷提取上面tar文件包 里面有一个项目 别TM反编译我的项目 链接 https pan xunlei com s VNDqngi2KD6Go2SmYGZiAizjA1 pwd b2w5 提取码 b2w5 2 搭建Linux
  • linux后台启动seata,yearning

    1 yearning nohup Yearning run b 8 142 131 56 p 9000 gt opt yearning log yearning log 2 gt 1 2 seata nohup sh seata serve
  • Vue项目部署到Linux服务器

    首先用到一个软件为finalshell 下面是我的百度网盘文件 永久有效嗷 链接 https pan baidu com s 1fUPI1RtHwTsvbfqctO1WDw 提取码 ymme FinalShell 简介 FinalShell
  • mysql 主从 mysqldump_MySQL5.7基于mysqldump的主从复制

    1创建账号 创建用于复制的账号 GRANT REPLICATION SLAVE ON TO repl 192 168 1 IDENTIFIED BY PASSWORD repl4salve 创建用于监控的账号 grant replicati
  • javascript模块化理解(通俗易懂)

    http www ruanyifeng com blog 2012 10 javascript module html http www ruanyifeng com blog 2012 10 asynchronous module def
  • epoll多路复用-----epoll_create1()、epoll_ctl()、epoll_wait()

    include
  • 虚幻引擎程序化资源生成框架PCG 之 常用撒点方法小结

    PCG真好玩 门槛很低 天花板很高 文章目录 前言 1 基本撒点 1 1 Landscape上撒点 1 2 使用射线检测在地表面撒点 1 3 使用曲线撒点 1 3 1 沿曲线撒点 1 3 2 在闭合曲线内部撒点 1 4 在StaticMes
  • 液晶LCD1602使用介绍

    液晶LCD1602简介 LCD1602液晶也叫1602字符型液晶模块 LCD1602液晶是一种专门用来显示字母 数字 符号的点阵型液晶模块 LCD1602液晶是由若干个5x7点阵字符位组成 每个点阵字符位都可以显示一个字符 包括字母 数字
  • Elasticsearch更新语法

    文章目录 update 语法 示例 数值计算 add列表元素 remove列表元素 add字段 remove字段 delete文档 detect noop upsert更新 新增 scripted upsert doc as upsert
  • python读取二进制文件并画图_使用Python读取二进制文件的实例讲解

    目标 目标文件为一个float32型存储的二进制文件 按列优先方式存储 本文使用Python读取该二进制文件并使用matplotlib pyplot相关工具画出图像 工具 Python3 matplotlib os struct numpy
  • 理解深度学习中的学习率

    学习率是最影响性能的超参数之一 如果我们只能调整一个超参数 那么最好的选择就是它 相比于其它超参数学习率以一种更加复杂的方式控制着模型的有效容量 当学习率最优时 模型的有效容量最大 从手动选择学习率到使用预热机制 本文介绍了很多学习率的选择
  • 渲染富文本编辑器并设置富文本编辑器的高度

    目标 富文本编辑器 vue quill editor 的基本使用 vue quill editor npm 一 渲染富文本编辑器 运行如下的命令 在项目中安装富文本编辑器 npm i vue quill editor 3 0 6 S 在项目
  • 关于android指纹识别兼容6.0以下版本

    指纹识别功能以及兼容6 0以下的版本 刚好公司安全问题用到了指纹识别和人脸识别 下面就介绍一下指纹识别的功能 其实看了源码要实现这个挺简单的 其实要使指纹识别功能能兼容6 0以下的版本主要是用FingerprintManagerCompat
  • java自学笔记1:java中的类

    一 1 类的重要性 所有java程序都以class为组织单元 2 什么是类 类是模子 确定对象将会y拥有的特征 属性 和行为 方法 3 类的组成 属性和方法 4 定义一个类的步骤 a 定义类名 b 编写类的属性 c 编写类的方法 publi
  • 如何在html中加入视频

    第一步 首先下载video js 百度一下就能找到 这个是下载后的目录 第二步 先把要用到的js css swf都加载到html页面上 如 第三步 加入下面的代码