寫了一個播放視頻的功能，僅僅實作暫停，播放功能，react實作，可兼容ios和Android
- 視頻路徑：videoUrl
- 視頻展示第一張圖片：pictureUrl
- 定義一個變數控制，播放暫停：videoControl
videoUrl和pictureUrl的路徑都是從后臺獲取到的，不方便展示
this.state = {
videoUrl: "", // 視頻路徑
pictureUrl: "", // 圖片路徑
videoControl: false
}
videoPlay：點擊播放按鈕
videoPause：點擊視頻實作暫停
<div className="video-mian">
{this.state.videoControl ? null : <div className={"video-controller " + (this.state.videoControl ? "" : "group")} onClick={this.videoPlay}></div>}
{/* 視頻容器 */}
<video
loop={true}
id="myVideo"
width="100%"
height="100%"
preload="load"
controls={false}
playsInline={true}
x5-playsinline="true"
x-webkit-airplay="allow"
// muted={true}
webkit-playsinline="true"
// x5-video-player-type="h5"
x5-video-orientation="portrait"
style={{ "objectFit": "fill" }}
x5-video-player-fullscreen="false"
onClick={this.videoPause}
poster={this.state.pictureUrl}
>
不支持該視頻格式，
</video>
</div>
//播放
videoPlay = () => {
this.setState({
videoControl: true
}, () => {
const myVideo = document.querySelector("#myVideo");
if (!myVideo.src) {
myVideo.src = this.state.videoUrl;
}
// 播放
myVideo.play();
})
}
//暫停
videoPause = () => {
this.setState({
videoControl: false
}, () => {
const myVideo = document.querySelector("#myVideo");
if (!myVideo.src) {
myVideo.src = this.state.videoUrl;
}
// 暫停
myVideo.pause();
})
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/398037.html
標籤：AI
上一篇：Android專案升級Android12遇到的坑The minCompileSdk (31) specified in a dependency‘s AAR metadata (META-INF/co