如何在html网页中插入视频（以及让视频自动播放的问题）

已于 2023-05-24 11:21:49 修改
阅读量1.4w 收藏 45
点赞数 11
文章标签： 音视频 前端 html5
于 2023-05-24 11:16:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74191800/article/details/130842787
版权

直接进入正题：

关于视频的插入可使用 video标签

如下图

 简单介绍下用到的几个属性

class定义了video类 在style中调整这个类的长度和高度属性；

src处引入视频的链接；

controls属性：允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放；

autoplay属性：让视频可以自动播放；

还有一些关于视频在网页中位置的调整

要满屏的话可将height和width调整为100%（下图以500px为例）

视频要居中或者置后的操作可在body标签中添加text-align:center（end），不过这个是将整个body部分全部居中(置后)了；

当然关于自动播放需要自行调节一下浏览器的设置，具体操作步骤可参考上一篇文章(10条消息) 关于如何在html网页中插入可以自动播放的背景音乐_Davis-plus的博客-CSDN博客https://blog.csdn.net/m0_74191800/article/details/130778263?spm=1001.2014.3001.5501

Davis-plus
关注
  • 11
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
HTML5的网页视频播放器源代码
03-18
video.js是一个JavaScript和CSS库，使得它更容易使用和建立HTML5视频，今天。这也被称为HTML5视频播放器。video.js提供了一个通用控件内置的HTML / CSS的皮肤，修复跨浏览器的不一致，增加了附加功能，如全屏和字幕，管理退回到Flash或其他播放技术，不支持HT
Html插入视频
03-09
Html插入视频
html插入视频的方法
Ss1122_的博客
12-29 498
至于我使用的时候有个时间点，和视频长度，本来就是想着这个属性是不是能用来做那个视频的播放条那个东西。controls 属性设置或返回浏览器应当显示标准的视频控件（播放，暂停，进度条，音量，全屏切换，字幕，轨道）。我引入视频就是使用这个标签，但是我使用视频的的属性并不多，只是使用了简单的播放暂停，至于其他的属性可能现在没有怎么使用，以后需要继续用一下。<source src="视频路径" type="video/视频格式"><embed src="视频路径" />方法二和方法三是不常用的。
使用html网页播放多个视频的几种方法
最新发布
Alon1787的博客
03-04 1073
使用html网页播放多个视频的几种方法
有些网页源代码中找不到body_HTML5 向网页嵌入视频和音频
weixin_39908616的博客
12-01 1442
现在很多网站上都会使用到视频和音频，HTML5 中提供了展示视频和音频的标签。向网页嵌入视频可以使用 <video> 标签，而嵌入音频可以使用 <audio> 标签。这两个标签都是 HTML 5 中新增的标签，两个标签中的属性和方法也很类似，但也有些不同。其中 audio 元素用于定义声音，比如音乐， video 元素用于定义视频，如电影等。向网页中嵌入视频<vide...
网页中插入视频的方案
weixin_34321977的博客
07-05 387
今天讨论网页中插入视频的方案，咱不讨论video标签的使用方法，video标签比较兼容的写法为： 1 &lt;video width="800" height=""&gt; 2 &lt;source src="myvideo.mp4" type="video/mp4"&gt;&lt;/source&gt; 3 &lt;sour
如何在网页中插入视频
deapou的博客
01-20 1万+
想在网页中插入视频从网上搜索了大概有以下两种方法： 是由HTML5自带的标签，这个标签就可以适用于很多的浏览器，但是对视频的格式有很高的要求，假如你是MP4的视频格式，那么就要求你的编码方式一定要是AVC(H264)的。建议使用“格式工厂”这个软件来更改视频的编码。不为啥，就图个方便！ 第二种方式使用标签。跟上述同理 而且就算弄完了这些代码，还有一个问题可能出现在视频上： 首先 v...
如何在html中加入视频
热门推荐
lalalalalala_的博客
01-06 33万+
第一步：首先下载video.js，百度一下就能找到。 这个是下载后的目录。 第二步：先把要用到的js\css\swf都加载到html页面上。 如： videojs.options.flash.swf = "video-js/video-js.swf"; 第三步：加入下面的代码：
html中引入视频的方法
m0_64562972的博客
10-16 3万+
视频
零基础HTML入门教程(13)——插入视频video标签
weixin_61808806的博客
12-06 5545
我们前几小结学习了，插入图片插入音频等，我们这一小结学习一下，插入视频标签video并熟练使用。(1)直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 (2)controls 属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 代码如下 效果如下 我们可以看到，页面上面会出现一个可以播放的视频，我们再一些网站上看到视频，都是用
html播放视频
weixin_43956958的博客
09-22 4259
video播放相关的API：video.duration：整个媒体文件的播放时长，单位svideo.paused ：如果媒体文件被暂停，则返回true；如果还没开始播放，默认返回truevideo.ended ：如果媒体文件播放完毕，则返回truevideo.currentTime：以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置。
HTML_插入视频并自动播放
小歪博客
05-14 3万+
<video autoplay="autoplay" loop="loop" id="video" x-webkit-airplay="true" webkit-playsinline="true" muted=""> <source src="视频地址" type="video/mp4"> </video>
域图全景VR视频网页播放器
04-21
域图新视界开发的免费版全景VR视频播放器(最新版本请访问victu360.com)，可以轻松内嵌于您的网站页面，支持pc端和手机浏览器端播放，支持苹果及安卓的微信、QQ等社交媒体播放，支持分屏后手机放VR盒子内观看，只需上传一个播放器目录，即可通过参数调用播放站内各个全景视频。支持自动旋转、小行星、重力控制、段落跳选、视角方向控制、自定义播放时间等功能。
阿赛HTML网页在线编辑器 v8版.rar
07-10
功能：不支持图片上传功能，但可插入网络图片之类的，支持样式、字体、字号、颜色、背景颜色、加粗、斜体、下划线、上标字、下标字、编号、对齐、缩进、链接、Word粘贴、Html清理、参考线、自动排版、查找替换、内容分页、插入代码、插入引用、字符插入、表情插入、表格插入、图片音乐动画视频等媒体文件插入，代码编辑、全屏编辑等等。。使用方法参考演示文档双击打开“演示.html”文件，或者放入IIS或网站中调试。
HTML5视频播放
11-07
HTML5视频播放 HTML5视频播放 HTML5视频播放 HTML5视频播放
网页中插入视频播放器代码全集.pdf
04-19
网页中插入视频播放器代码全集.pdf 在网页中加入视频播放的技术大全，代码很全，很好用，介绍详细，是入门的好参考书！
网页视频播放软件代码，支持m3u8,mp4,flv,jpg,jpeg,png,gif,swf,f4v等格式播放
04-27
该代码是一款在网页上播放视频的软件，主要特点是：免费，小巧，功能强大，定制方便。风格部分： 1：支持界面风格自定义 2：支持加密风格 常规功能： 3：支持多种调用方式 4：支持视频地址加密功能 5：支持点播 6：...
videomatchingbackgroundcolor:嵌入具有正确背景色的html视频
04-27
将HTML5视频与背景色匹配这是一个有关如何处理应无缝插入网站的html5视频的颜色派生错误的示例。 我主要将其用于与目标网页集成的大型视频。 有关其工作原理的完整解释，请。 现场演示基本上，它将视频渲染到画布上...
VSCode代码格式化快捷键及保存时自动格式化
08-10
都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、...
html5 视频 居中
09-06
在HTML5中，要实现视频居中显示，可以采用以下方法： 1. 通过设置视频的宽度和高度为百分比来实现自适应屏幕大小。一般情况下，视频的宽度或高度设置为100%可以使视频充满整个父容器。 2. 使用JavaScript计算视频的缩放比例。可以通过以下公式计算缩放后的高度： ``` var scaleHeight = videoHeight * clientWidth / videoWidth; ``` 其中，videoHeight是视频原始高度，clientWidth是容器的宽度，videoWidth是视频原始宽度。同样地，可以通过以下公式计算缩放后的宽度： ``` var scaleWidth = videoWidth * clientHeight / videoHeight; ``` 其中，clientHeight是容器的高度。通过计算得到的缩放值，可以通过设置CSS样式来调整视频的尺寸。 3. 使用CSS的绝对定位来实现垂直居中。可以通过设置视频容器的top属性为50%来将其上边缘移动到垂直居中的位置。但是由于整体内容并不是垂直居中，还需要通过设置margin-top属性来将视频容器的上边距移动到高度的一半位置，即负父容器宽度的一半像素。例如： ``` margin-top: -2/父宽 px; //为高度的一半 ``` 其中，父宽是父容器的宽度。通过这种方式可以实现视频的垂直居中。 综上所述，通过设置视频的宽度和高度为百分比、计算缩放比例以及使用CSS的绝对定位等方法，可以实现HTML5视频的居中显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Davis-plus

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值