2022-11-10 工作记录--HTML-video视频铺满播放

`HTML`-`video`视频铺满播放

一、实现效果 ⭐️

1、未铺满播放 ❎

2、铺满播放 ✅

二、实现代码 ⭐️

以react为例

1、未铺满播放 ❎

homePage.jsx

import React from 'react';import './homePage.less';class HomePage extends React.Component {constructor(props) {super(props);this.state = {showWidget: false, // 是否展示视频里的浏览器默认的控件isVideoPlay: false, // 是否播放视频}}// 播放视频playVideo = () => {this.setState({isVideoPlay: true,showWidget: true,});if (this.videoRef) {// 播放视频this.videoRef.play();}};render() {const { showWidget, isVideoPlay } = this.state;// 视频封面图（地址是我乱写的，根据自己需求来改）// eslint-disable-next-lineconst posterUrl = "https://yun.test.com.cn/poster.png";// 视频地址（地址是我乱写的，根据自己需求来改）// eslint-disable-next-lineconst videoUrl = "https://yun.test.com.cn/video.mp4";return (<div className="homePage">{/* 视频 */}<div className="videoItem">{/* video【注意：视频地址是通过接口获取时，一定不要忘记加 videoUrl &&。若忘记加了，视频就会加载不出来哦】*/}{videoUrl && (<videoref={el => (this.videoRef = el)}className="videoContent"// 浏览器默认的控件controls={showWidget}preload="auto"webkit-playsinline="true"playsInline={true}>{/* 视频地址 */}<source src={videoUrl} type="video/mp4" />您的浏览器不支持 video 标签。</video>)}{/* 视频未播放时的展示内容 */}{!isVideoPlay &&<><imgclassName="videoPoster"// 视频封面图src={posterUrl}onClick={this.playVideo}/><span className="tip">点击观看视频</span></>}</div></div >);}
}export default HomePage;

homePage.less

.homePage {width: 100%;height: 100vh;margin: 0;padding: 0;background-color: #d8e9ef;padding-top: 549px;box-sizing: border-box;.videoItem {width: 696px;height: 370px;margin: auto;background-color: #fff;border-radius: 25px;position: relative;.videoContent,.videoPoster {width: 100%;height: 100%;border-radius: 25px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}.tip{width: 200px;height: 60px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: rgba(0, 0, 0, 0.7);text-align: center;color: #ffffff;border-radius: 10px;line-height: 60px;/** 实现点击穿透 */pointer-events: none;}}
}

2、铺满播放 ✅

给video加上样式：object-fit: cover;，实现ios和android都兼容。

homePage.jsx

import React from 'react';import './homePage.less';class HomePage extends React.Component {constructor(props) {super(props);this.state = {showWidget: false, // 是否展示视频里的浏览器默认的控件isVideoPlay: false, // 是否播放视频}}// 播放视频playVideo = () => {this.setState({isVideoPlay: true,showWidget: true,});if (this.videoRef) {// 播放视频this.videoRef.play();}};render() {const { showWidget, isVideoPlay } = this.state;// 视频封面图（地址是我乱写的，根据自己需求来改）// eslint-disable-next-lineconst posterUrl = "https://yun.test.com.cn/poster.png";// 视频地址（地址是我乱写的，根据自己需求来改）// eslint-disable-next-lineconst videoUrl = "https://yun.test.com.cn/video.mp4";return (<div className="homePage">{/* 视频 */}<div className="videoItem">{/* video【注意：视频地址是通过接口获取时，一定不要忘记加 videoUrl &&。若忘记加了，视频就会加载不出来哦】*/}{videoUrl && (<videoref={el => (this.videoRef = el)}className="videoContent"// 浏览器默认的控件controls={showWidget}preload="auto"webkit-playsinline="true"playsInline={true}// 视频封面图poster={posterUrl}onClick={this.playVideo}>{/* 视频地址 */}<source src={videoUrl} type="video/mp4" />您的浏览器不支持 video 标签。</video>)}{/* 视频未播放时的展示内容 */}{!isVideoPlay && <span className="tip">点击观看视频</span>}</div></div >);}
}export default HomePage;

homePage.less

.homePage {width: 100%;height: 100vh;margin: 0;padding: 0;background-color: #d8e9ef;padding-top: 549px;box-sizing: border-box;.videoItem {width: 696px;height: 370px;margin: auto;background-color: #fff;border-radius: 25px;position: relative;.videoContent {width: 100%;height: 100%;border-radius: 25px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);/** 实现视频铺满 */object-fit: cover;}.tip{width: 200px;height: 60px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: rgba(0, 0, 0, 0.7);text-align: center;color: #ffffff;border-radius: 10px;line-height: 60px;/** 实现点击穿透 */pointer-events: none;}}
}

哒哒哒哒~ biu biu biu~

2022-11-10 工作记录--HTML-video视频铺满播放相关推荐

vue使用video和vue-video-player并且可实现视频铺满呦
网页放置视频播放器,我一般都是用video.js和它的插件vue-video-player 一:Video.js 需求:对于简单的视频播放需求来说,video.js足以胜任了. 它可是支持HTML5和 ...
video标签样式铺满全屏
video标签是不会自动铺满整个div的,即便是给它设置了高度为100%:所以当需要video标签铺满整个div时,可以给video标签加上'object-fit:fill'样式,这样就可以解决了! ...
img 在video上面_HTML,img,video无法铺满屏幕解决方法，同视频做网页背景无法全屏的解决方法...
我在这里用视频做为网页背景,给视频设了100%宽高,在firebug也显示video的宽高和页面是一样的,但是效果却没出来,视频没有铺满屏幕.下面是我的代码(原代码,错误的) *{margin: 0; ...
html5 video标签不能播放视频,h5 video 视频不能正常播放
在页面中用video标签嵌入了一个视频: 其中 video 的 poster 属性的值和 source 的 src 的值都是存在 json 数组里动态获取的. 这个页面用ios自带的浏览器和qq直接打 ...
js计算金额精度问题--currency.js（2022.11.10 阴）
问题重现: console.log(10*2.88,'价格') // 结果为 28.799999999999997 // 原因: // 计算机能读懂的是二进制,进行运算的时候,实际上是把数字转换为了二 ...
2022.11.10 英语背诵
fester 脓疮,恶化 longitude 经度 frontier 国境,尖端 sanitary 清洁的,保健的,卫生的 sting 刺,刺痛 declaration 宣布,宣言,宣告 supers ...
微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案
效果图展示: 实现方法: 在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图.一个用来存放播放按钮,同级写一个cover-view用 ...
微信小程序——video视频全屏播放
object-fit 属性 <video src="../demo.mp4" object-fit="cover"></video>
关于video.js播放视频，设置视频铺满外围盒子
第一步:videojs 的options设置时,不指定width和height 第二步 :修改css 第三步:在创建player之前,把元素的padding-top设置成0px

2022-11-10 工作记录--HTML-video视频铺满播放

`HTML`-`video`视频铺满播放

一、实现效果 ⭐️

1、未铺满播放 ❎

2、铺满播放 ✅

二、实现代码 ⭐️

1、未铺满播放 ❎

2、铺满播放 ✅

2022-11-10 工作记录--HTML-video视频铺满播放相关推荐

最新文章

热门文章