我一直在尝试自定义我的视频元素,并希望能够切换播放/暂停移动并更改预定播放器的一些颜色,但我是新手,想知道是否有人可以帮助我调整此 Js 代码 react 。
下面是我的播放器的所有代码:
JS
const video = document.querySelector(".video");
const juice = document.querySelector(".orange-juice");
const bin = document.querySelector("play-pause");
function togglePlayPause() {
if (video.paused) {
btn.className = "pause";
video.play();
} else {
btn.className = "play";
video.pause();
}
}
btn.onclick = function () {
togglePlayPause();
};
video.addEventListener('timeupdate', function () {
var juicePos = video.currentTime / video.duration;
juice.style.width = juicePos * 100 + "%";
if (video.ended) {
btn.className = 'play';
}
});
html 里面的 react
<div class="c-video">
<video
loop
muted
playsInline
className="Video"
src={videoUrl}
style={videoStyle}
controls="controls"
/>
<div class="controls">
<div class="orange-bar">
<div class="orange-juice"></div>
</div>
<div class="buttons">
<button id="play-pause"> </button>
</div>
</div>
</div>
CSS
.Video {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
min-height: 51vmin;
}
.c-video {
width: 100%;
position: relative;
overflow: hidden;
}
.c-video:hover .controls{
transform: translateY(0);
}
.controls {
display: flex;
position: absolute;
bottom: 0;
width: 100%;
flex-wrap: wrap;
background: black;
transform: translateY(100%) translateY(-5px);
transition: all .2s;
}
.buttons{
padding: 10px;
}
.buttons button.play:before {
padding: 10px;
content: 'play';
}
.buttons button.pause:before {
padding: 10px;
content: 'pause';
}
.buttons button {
background: none;
border: 0;
outline: 0;
cursor: pointer;
}
.buttons button:before {
content: 'play';
width: 30px;
height: 30px;
display:inline-block;
font-size: 28px;
color:white;
-webkit-font-smoothing: antialiased;
}
.orange-bar {
height: 10px;
top: 0;
left: 0;
background:black;
width: 100%
}
.orange-juice {
height: 10px;
width: 100px;
background-color: orangered;
}
最佳答案
为了能够直接与 DOM 交互,你应该获得一个 ref
function Component() {
const videoRef = React.useRef();
const handleTimeUpdated = () => {
// do something on time update
}
const handlePlay = () => {
videoRef.current.play();
}
const handlePause = () => {
videoRef.current.pause();
}
return (
<div className="c-video">
<video
loop
muted
playsInline
className="motivesVideo"
src={videoUrl}
style={videoStyle}
controls="controls"
ref={videoRef} // it was added
onTimeUpdate={handleTimeUpdated}
/>
<button onClick={handlePlay}>Play</button>
<button onClick={handlePause}>Pause</button>
</div>
);
}
您可以在此处查看该组件: https://github.com/video-react/video-react/blob/master/src/components/Video.js#L572
关于javascript - 如何将此 JS 代码适应我的 Reactjs 应用程序,以便我可以自定义我的视频播放器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61625602/