英文:
Looping animations HTM5 - replacing video only after current video has finished playing
问题
以下是代码部分的翻译：
[![显示图像描述][1]][1]
我有以下代码，它显示一个循环中的球体动画。我想要能够控制动画的变化，以便如果我点击播种/深度搜索按钮，它只会在当前动画完成后更改视频。需要包括视频预加载和事件冒泡处理，以避免在一个动画仍在播放时尝试切换不同的动画。也许采用最新点击的按钮动画 - 跳过尝试播放早期点击的动画。
[代码链接](https://codesandbox.io/s/fragrant-thunder-czctj7)
<!DOCTYPE html>
<html>
<body>
<script>
let animationStackObject = [{
"state": "idol",
"path": "./orb2/idol.mp4"
},
{
"state": "seeding",
"path": "./orb2/seeding.mp4"
},
{
"state": "deepsearch",
"path": "./orb2/deepsearch.mp4"
}
]
let videoController = {
vid: document.getElementById("myVideo"),
init: function(){
//let vid = document.getElementById("myVideo");
//vid.src = getAnimation("idol", animationStackObject)
//setCurrentState("idol");
//this.playVid()
//playVideo()//loopable
},
getAnimation: function(state, animationStackObject){
//-- 返回所请求状态的正确动画堆栈元素
},
playVid: function() {
let vid = document.getElementById("myVideo");
vid.play();
console.log(vid.duration);
console.log(vid.currentTime);
//1个循环中的视频持续时间为5秒 - 启动计时器
},
pauseVid: function() {
let vid = document.getElementById("myVideo");
vid.pause();
},
videoEnded: function() {
console.log("结束。");
this.playVid()
},
changeMood: function(state){
//视频仍在播放吗？
//在视频完成时断开循环并发送新视频以播放
//setCurrentState("idol");
//将当前视频更改为新视频路径
//播放循环
console.log(state);
this.changeVideo();
},
changeVideo: function() {
var vid = document.getElementById('myVideo');
var source = document.createElement('source');
source.setAttribute('src', './orb2/idol.mp4');
source.setAttribute('type', 'video/mp4');
vid.innerHTML = "";
//document.getElementById("content").innerHTML = "whatever";
vid.appendChild(source);
vid.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
setTimeout(function() {
vid.pause();
source.setAttribute('src', './orb2/seeding.mp4');
source.setAttribute('type', 'video/mp4');
vid.load();
vid.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
}, 3000);
}
}
videoController.init();
</script>
<button onclick="videoController.playVid()" type="button">播放视频</button>
<button onclick="videoController.pauseVid()" type="button">暂停视频</button><br>
循环
<video id="myVideo" width="320" height="176" onended="videoController.videoEnded()">
<source src="./orb2/idol.mp4" type="video/mp4">
您的浏览器不支持HTML5视频。
</video>
<button onClick="videoController.changeMood('Idol')">Idol</button>
<button onClick="videoController.changeMood('Seeding')">Seeding</button>
<button onClick="videoController.changeMood('DeepSearch')">DeepSearch</button>
</body>
</html>
请注意，这是代码部分的翻译，不包括代码中的注释。如果您需要对注释进行翻译，请提供具体的注释内容。
英文:
I have the following code where it shows an orb animation on loop. I want to be able to control the changes in animation so that if I click on the seeding/deepsearch buttons it changes the video ONLY after the current animation has finished. Need to include maybe preloading of videos and event bubbling handling to avoid trying to switch different animations whilst one is still playing. Maybe take on the very latest button clicked animation - skip trying to play an earlier click.
https://codesandbox.io/s/fragrant-thunder-czctj7
<!DOCTYPE html>
<html>
<body>
<script>
let animationStackObject = [{
"state":"idol",
"path": "./orb2/idol.mp4"
},
{
"state":"seeding",
"path": "./orb2/seeding.mp4"
},
{
"state": "deepsearch",
"path": "./orb2/deepsearch.mp4"
}
]
let videoController = {
vid: document.getElementById("myVideo"),
init: function(){
//let vid = document.getElementById("myVideo");
//vid.src = getAnimation("idol", animationStackObject)
//setCurrentState("idol");
//this.playVid()
//playVideo()//loopable
},
getAnimation: function(state, animationStackObject){
//-- return animationStackElement of correct state requested
},
playVid: function() {
let vid = document.getElementById("myVideo");
vid.play();
console.log(vid.duration);
console.log(vid.currentTime);
//duration of video in 1 loop is 5 seconds - start a timer
},
pauseVid: function() {
let vid = document.getElementById("myVideo");
vid.pause();
},
videoEnded: function() {
console.log("The End.");
this.playVid()
},
changeMood: function(state){
//is video still playing
//at point video has finished break loop and send new video to be played
//setCurrentState("idol");
//change current video to new video path
//play loop
console.log(state);
this.changeVideo();
},
changeVideo: function() {
//
var vid = document.getElementById('myVideo');
var source = document.createElement('source');
source.setAttribute('src', './orb2/idol.mp4');
source.setAttribute('type', 'video/mp4');
vid.innerHTML = "";
//document.getElementById("content").innerHTML = "whatever";
vid.appendChild(source);
vid.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
setTimeout(function() {
vid.pause();
source.setAttribute('src', './orb2/seeding.mp4');
source.setAttribute('type', 'video/mp4');
vid.load();
vid.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
}, 3000);
//
}
}
videoController.init();
</script>
<button onclick="videoController.playVid()" type="button">Play Video</button>
<button onclick="videoController.pauseVid()" type="button">Pause Video</button><br>
loop
<video id="myVideo" width="320" height="176" onended="videoController.videoEnded()">
<source src="./orb2/idol.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<button onClick="videoController.changeMood('Idol')">Idol</button>
<button onClick="videoController.changeMood('Seeding')">Seeding</button>
<button onClick="videoController.changeMood('DeepSearch')">DeepSearch</button>
</body>
</html>
答案1
得分: 1
将最新的按钮点击保存到一个变量中，并且只在当前视频结束时更改视频源：
let animationStackObject = [
{
"state": "idol",
"path": "https://czctj7.csb.app/orb2/idol.mp4"
},
{
"state": "seeding",
"path": "https://czctj7.csb.app/orb2/seeding.mp4"
},
{
"state": "deepsearch",
"path": "https://czctj7.csb.app/orb2/deepsearch.mp4"
}
];
// 存储下一个要播放的视频。Null 表示继续当前视频。
let next = null;
let videoController = {
vid: document.getElementById("myVideo"),
init: function() {
//let vid = document.getElementById("myVideo");
//vid.src = getAnimation("idol", animationStackObject)
//setCurrentState("idol");
//this.playVid()
//playVideo()//loopable
},
getAnimation: function(state, animationStackObject) {
//-- 返回所请求状态的 animationStackElement
},
playVid: function() {
let vid = document.getElementById("myVideo");
vid.play();
console.log(vid.duration);
console.log(vid.currentTime);
// 1 次循环内视频的持续时间为 5 秒 - 启动计时器
},
pauseVid: function() {
let vid = document.getElementById("myVideo");
vid.pause();
},
videoEnded: function() {
console.log("结束。");
// 如果选择了不同的视频，切换到它。
if (next) {
this.changeVideo(next);
next = null;
}
this.playVid()
},
changeMood: function(state) {
// 视频仍在播放吗？
// 在视频结束时，中断循环并发送新的视频以播放
// setCurrentState("idol");
// 将当前视频更改为新的视频路径
// 播放循环
console.log(state);
next = state.toLowerCase();
},
changeVideo: function(which) {
const vid = document.getElementById('myVideo');
const source = vid.querySelector('source');
source.setAttribute('src', animationStackObject.find(({ state }) => state === which).path);
vid.load();
vid.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
}
}
videoController.init();
<button onclick="videoController.playVid()" type="button">播放视频</button>
<button onclick="videoController.pauseVid()" type="button">暂停视频</button><br> 循环
<video id="myVideo" width="320" height="176" onended="videoController.videoEnded()">
<source src="https://czctj7.csb.app/orb2/idol.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<button onClick="videoController.changeMood('Idol')">偶像</button>
<button onClick="videoController.changeMood('Seeding')">播种</button>
<button onClick="videoController.changeMood('DeepSearch')">深度搜索</button>
英文:
Save the latest button click into a variable, and only change the source when the current video ends:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let animationStackObject = [
{
"state": "idol",
"path": "https://czctj7.csb.app/orb2/idol.mp4"
},
{
"state": "seeding",
"path": "https://czctj7.csb.app/orb2/seeding.mp4"
},
{
"state": "deepsearch",
"path": "https://czctj7.csb.app/orb2/deepsearch.mp4"
}
];
// Store which video will play next. Null means continue the
// current video.
let next = null;
let videoController = {
vid: document.getElementById("myVideo"),
init: function() {
//let vid = document.getElementById("myVideo");
//vid.src = getAnimation("idol", animationStackObject)
//setCurrentState("idol");
//this.playVid()
//playVideo()//loopable
},
getAnimation: function(state, animationStackObject) {
//-- return animationStackElement of correct state requested
},
playVid: function() {
let vid = document.getElementById("myVideo");
vid.play();
console.log(vid.duration);
console.log(vid.currentTime);
//duration of video in 1 loop is 5 seconds - start a timer
},
pauseVid: function() {
let vid = document.getElementById("myVideo");
vid.pause();
},
videoEnded: function() {
console.log("The End.");
// If there is a different video selected,
// switch to it.
if (next) {
this.changeVideo(next);
next = null;
}
this.playVid()
},
changeMood: function(state) {
//is video still playing
//at point video has finished break loop and send new video to be played
//setCurrentState("idol");
//change current video to new video path
//play loop
console.log(state);
next = state.toLowerCase();
},
changeVideo: function(which) {
const vid = document.getElementById('myVideo');
const source = vid.querySelector('source');
source.setAttribute('src', animationStackObject.find(({ state }) => state === which).path);
vid.load();
vid.play();
console.log({
src: source.getAttribute('src'),
type: source.getAttribute('type'),
});
}
}
videoController.init();
<!-- language: lang-html -->
<button onclick="videoController.playVid()" type="button">Play Video</button>
<button onclick="videoController.pauseVid()" type="button">Pause Video</button><br> loop
<video id="myVideo" width="320" height="176" onended="videoController.videoEnded()">
<source src="https://czctj7.csb.app/orb2/idol.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<button onClick="videoController.changeMood('Idol')">Idol</button>
<button onClick="videoController.changeMood('Seeding')">Seeding</button>
<button onClick="videoController.changeMood('DeepSearch')">DeepSearch</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论