video标签属性值参数说明
发布时间
阅读量：
阅读量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="applicable-device" content="mobile" />
<title>课程</title>
<!--CSS-->
<link rel="stylesheet" href="./css/course.css" />
</head>
<body class="all_content">
<!-- video标签属性：
disablePictureInPicture="true"不要画中画
controlslist="nodownload nofullscreen noremoteplayback"
nodownload: 不要下载
nofullscreen: 不要全屏
noremoteplayback: 不要远程回放
id="video"
src="video.mp4"
controls = "true"
poster="images.jpg" // 视频封面
preload="auto"
webkit-playsinline="true" /* 这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
playsinline="true" // IOS微信浏览器支持小窗内播放
x-webkit-airplay="allow"
x5-video-player-type="h5" // 启用H5播放器,是wechat安卓版特性
x5-video-player-fullscreen="true" // 全屏设置，设置为 true 是防止横屏
x5-video-orientation="portraint" // 播放器的方向， landscape横屏，portraint竖屏，默认值为竖屏
style="object-fit:fill"
-->
<div class="video">
<video
id="video"
src="honghua.mp4"
controls="true"
preload="auto"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
style="object-fit: fill"
controlslist="nodownload noremoteplayback"
disablePictureInPicture="true"
playsinline
webkit-playsinline
></video>
</div>
<div class="text_content">
<div class="title">详情介绍</div>
<div class="line"></div>
<div class="course_title">如何应对职业倦怠</div>
<div class="fu_title">不想上班？你需要改变一下状态！</div>
<div class="lecturer">
<text>讲师：张煜宵</text>
<text>已完结/共1节</text>
</div>
</div>
<div class="image">
<img src="./images/123.jpg" alt="" />
</div>
</body>
</html>全部评论 (0)
还没有任何评论哟~