HTMl5怎样插入视频？

最新推荐文章于 2023-12-13 15:33:19 发布

小玲儿珰

最新推荐文章于 2023-12-13 15:33:19 发布

阅读量3.5k

点赞数 6

分类专栏： html5专栏文章标签： html css js

本文链接：https://blog.csdn.net/weixin_43928264/article/details/105148331

版权

html5专栏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我们都知道，HTML5有着诸多新标签，其中就有着能够插入视频的标签，这样就大大解放了我们写插入视频的代码的效率。HTML5插入视频用的是video标签，但是要想做个比较好的效果，就得用到video.js这个开源的js文件，要把该文件link入我们的HTML文件中。其中，我准备了如下所示的HTML5的插入视频用的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<title>video</title>
	<link href="css/video-js.min.css" rel="stylesheet">
	<style type="text/css">
    body {
		background-color: #222222;
		}
		.qwer {
			position: absolute;
		    margin-left: 150px;
			margin-top: 50px;
		        }
    
	</style>
</head>

<body>
   <div class="qwer" style="width: 1920px; height: 1080px;">
    <video id="my-video" class="video-js" width="1920" height="1080" controls preload="auto" data-setup="{}"
		  poster="Images/*****.jpg">
	  <source src="video/*****.mp4" type="video/mp4"/>
		 <p class="vjs-no-js"> ********<a href="http://videojs.com/html5-video-support/" target="_blank">******</a> </p>
  </video>

	</div>
</body>
</html>

代码并不多，但贵在精！把我上面的代码的***部分变为自己视频图片的名称即可，想加的文字自己加，随心所欲。其中，制作该video的相关的.js与.css文件附在资源中，大家可以自取。

小玲儿珰

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
HTMl5怎样插入视频？

我们都知道，HTML5有着诸多新标签，其中就有着能够插入视频的标签，这样就大大解放了我们写插入视频的代码的效率。HTML5插入视频用的是video标签，但是要想做个比较好的效果，就得用到video.js这个开源的js文件，要把该文件link入我们的HTML文件中。其中，我准备了如下所示的HTML5的插入视频用的代码：<!DOCTYPE html><html lang="en"...
复制链接

扫一扫