您好,欢迎来到福步贸易网!
关注我们
service@fubuwang.com
全部产品分类
怎样在html里面加入视频?
   https://www.fubuwang.com 2023-10-13 23:31:07 来源:网络
核心提示:通过html5中的video标签添加视频文件。1、新建html文件,如图所示,在body标签中添加video标签,为video标签设置“src”属性,属性值是视频文件地址,这里以html同一目录下的“movie.mp4”视频为例:2、此时的

通过html5中的video标签添加视频文件。

1、新建html文件,如图所示,在body标签中添加video标签,为video标签设置“src”属性,属性值是视频文件地址,这里以html同一目录下的“movie.mp4”视频为例:

2、此时的视频只会显示一个封面,并没有控制按钮,这时为video标签添加“controls”属性,如图所示,不需要添加属性值,可以看到视频中出现了常用的控制按钮:

3、直接插入的视频显示宽和高是视频本身默认的宽和高,这时可以给video添加我们想要的宽和高,这里以宽度400和高度300为例,添加属性“width”,属性值为“400”,添加属性“height”,属性值为“300”:

4、这时视频默认是加载完成后等待用户点击播放按钮再播放,如果需要加载完成后自动播放,可以给video添加属性“autoplay”,属性值为“autoplay”,这时视频加载完成后就会自动播放:

html插入视频的代码是什么

在html中加入视频可以通过以下4个步骤来实现。

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

第二步:先把要用到的jscssswf都加载到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" 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文件查看效果吧

工具/原料:

联想小新潮7000-13

Win 10

Visual Studio Code1.47.2

1、进入Visual Studio Code,新建html文件

打开Visual Studio Code软件,打开工作区空间,选择需要进行操作的文件夹,点击上方的新建文件选项。

2、给html文件命名为video.html

在弹出的文本框中给html文件命名,文件命名为video.html。

3、输入添加视频文件的代码

在新建的.html文件中输入添加视频文件的html代码:

<video src="../media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>。

4、使用工具查看代码效果

在代码的空白区域右击—>在弹出的选项卡中选择Open In Default Browser选项。

5、显示视频文件

点击运行之后,在浏览器网页中显示添加的视频文件,点击播放按钮,正常播放视频。

以上就是关于怎样在html里面加入视频?全部的内容,如果了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

 
举报收藏 0打赏 0评论 0

免责声明:
1.本站部份内容系网友自发上传与公开信息收集转载,转载目的在于传递更多信息,并不代表本站赞同其观点和对其真实性负责。版权归属原平台(作者)所有,版权争议与本站无关;
2.秉承互联网开放、包容的精神,福步网欢迎各方(自)媒体、机构转载、引用我们原创内容,但要严格注明来源:福步网
3.我们倡导尊重与保护知识产权,如发现本站文章存在版权问题,烦请将版权疑问、授权证明、版权证明、联系方式等,发邮件至service@fubuwang.com,我们将第一时间核实、处理,谢谢。

 
福步贸易网  |  公司简介  |  意见建议  |  法律申明  |  隐私政策  |  广告投放  |  如何免费信息发布?  |  如何开通福步贸易网VIP?  |  VIP会员能享受到什么服务?  |  怎样让客户第一时间找到您的商铺?  |  如何推荐产品到自己商铺的首页?  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  粤ICP备15082249号 |  m.fubuwang.com