Copy link to clipboard
Copied
I want my video on my webpage to start at frame 1 and play to frame 300 then loop back to frame 60 and play to frame 300 and repeat. is this too much to ask? it seems like no one knows the answer or even thought of this option.
Too much to ask. The HTML 'loop' attribute can only replay media from start to finish.
What you want will require custom re-editing in your video editing software -- Adobe Premiere Elements, Premiere Pro or After Effects. Then export the whole video project, loops & all, to MP4 format.
Hope that helps.
Copy link to clipboard
Copied
Too much to ask. The HTML 'loop' attribute can only replay media from start to finish.
What you want will require custom re-editing in your video editing software -- Adobe Premiere Elements, Premiere Pro or After Effects. Then export the whole video project, loops & all, to MP4 format.
Hope that helps.
Copy link to clipboard
Copied
no that doesn't help. looping created in video editor like premiere or after effect is fine but then you bring it into dreamweaver the Loop option will just loop the video from beginning to end. this is a video i'm talking about, not an animation where certain frames are repeated. two different things. looping an animation in after effect is like looping a ball bouncing up and down (pingpong) or to make it roll in circle (cycle) is completely different than looping a video where it fades in then you see a video then it loops back to certain frame excluding the fading in again. WHEN you put that video into dreamweaver for a website to view using Loop option in dreamweaver the video will just loop back to the beginning, including the fade in again. why is this so hard for Adobe or anyone to understand the concept? lack of imagination? I have been using Adobe since 1991. I came up with the concept for having layers before there were layers. And everytime I had to come up with things for Adobe to consider. Maybe I should get paid for it.
Copy link to clipboard
Copied
Web technology works according to the W3C specs. Adobe & Dreamweaver have nothing to do with it.
Loop will always replay media from the first frame to the end unless you sandwich frames into the middle with Premiere or After Effects.
Another option, convert video to frame animation in Photoshop, copy & paste frames 60 - 300 to the end. Export to animated GIF or WEBP project.
Good luck with your project.
Copy link to clipboard
Copied
Have a look at this extension for Dreamweaver
Alternatively, start using Wappler which has the extension already included.
An example can be seen here: https://bunchokids.org/
Copy link to clipboard
Copied
Just curious. How is this related to custom LOOPING?
" I want my video to start at frame 1, play to frame 300, then loop from frame 60 to frame 300 and repeat."
Copy link to clipboard
Copied
I did not want to repeat what you said
"Too much to ask. The HTML 'loop' attribute can only replay media from start to finish. "
So I gave an example of what it would be "from start to finish" plus give the BunchOKids site a bit of exposure. This is not a commercial site, just based on good behaviour.
Copy link to clipboard
Copied
i had a look, it sucks. have a ton of problem people complaining in their community section. and it cannot do what i asked either.
Copy link to clipboard
Copied
That's not something HTML can do. Sorry.
Copy link to clipboard
Copied
Hi @ApolloGT , in addition to everything that's been said so far, and it's true that the responses have remained mainly focused on HTML attributes and DW functionalities, I'd like to add that if you use JavaScript, it's very easy to achieve what you seem to want to set up.
Based on an article written by @B i r n o u a few years ago, he used the video API and video cue points... https://www.puce-et-media.com/utiliser-des-points-de-repere-en-video/ to drive actions... So, your scenario is quite conceivable in a similar way for playing a video in a truncated loop.
If you're working with cue points (which are much more precise), you'll find the basis for your work in the article, but if you're working with less precision, you'll find the appropriate code directly on the https://demo.puce-et-media.com/ApolloGT/video.html page.
Between the interface and the code comments (ctrl U) ... you should be able to get the hang of it... (most of the code remains cosmetic to highlight the process) I've been wordy enough to be clearer, but if I haven't, don't hesitate to come back to the forum.
Copy link to clipboard
Copied
thank you, the first link went to a page in French. I looked but not sure they have an English version. the second link https://demo.puce-et-media.com/ApolloGT/video.html gave me a blank page.
I had done this loop that I'm asking for in Adobe Flash before, it's nothing new. why can't this be done in Dreamweaver or with the help of Python or something? I will try the code from the link you sent. thanks.
Copy link to clipboard
Copied
thank you, the first link went to a page in French. I looked but not sure they have an English version.
By @ApolloGT
Just use google translate for that... https://translate.google.com/?sl=auto&tl=fr&op=translate and enter the URL in the input field
just in case here is the direct link
www-puce--et--media-com.translate.goog/utiliser-des-points-de-repere-en-video/?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=wapp
at the top of the page you also have a selector to change language if needed
the second link https://demo.puce-et-media.com/ApolloGT/video.html gave me a blank page.
By @ApolloGT
if you look at the top of the page you will find three buttons... clicking the first one will load a video. then the other two buttons will start normal playback of the video for the first, and for the second the playback will start normally but when reaching 3/4 of the duration the playback will loop between 1/4 and 3/4 until you click again on the stop button
why can't this be done in Dreamweaver or with the help of Python or something?
By @ApolloGT
yes that is done using JavaScript
Copy link to clipboard
Copied
thank you. i still think Adobe should look into improving this option for future video playback imbeded in dreamweaver
Copy link to clipboard
Copied
I still think Adobe should look into improving this option for future...
By @ApolloGT
==========
That will never happen.
See below for more details.
Dreamweaver Development Stopped
Copy link to clipboard
Copied
like nothing ever happened, except for our money going into you bank account.
Copy link to clipboard
Copied
@ApolloGT from your reply, it would seem that the script I provided earlier, isn't helping you !
Have you checked whether the behavior obtained by the video loop function does not correspond to your expectations?
Just in case, please :
Isn't that the scenario you were looking for?
Copy link to clipboard
Copied
yes this is what i wanted. i have looked at the script you provided and had it translated. I'll try it. thank you.
Apollo GT
Copy link to clipboard
Copied
i might need more help to understand it.
Copy link to clipboard
Copied
I'm sorry, @ApolloGT , I didn't see your message... so I hope it's not too late for you... here are some explanations on how to set up a JavaScript-driven video loop.
Imagine, for example, an HTML page containing a simple video and a unique button.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Truncated Loop</title>
<style>
/* Optional: Add some basic styling */
#playPauseButton {
margin-top: 10px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="videoContainer">
<video id="videoElement" src="https://www.puce-et-media.com/wp-content/uploads/lapi-video/video.webm"></video>
<button id="playPauseButton">Play</button>
</div>
</body>
</html>
Add a SCRIPT tag at the end of the HTML and develop it step by step...
<script>
</script>
First, let's associate the video and the button with JS objects
var videoAPI = document.getElementById('videoElement');
var playPauseButton = document.getElementById('playPauseButton');
Then let's define a set of variables that will be useful later on
<script>
var videoAPI = document.getElementById('videoElement');
var playPauseButton = document.getElementById('playPauseButton');
var start;
var end;
var interval = 33;
var intervalID = null;
var looping = false;
</script>
Now let's set up a function to launch the video and place a checker that will be invoked at regular intervals. The purpose of this checker is to check whether the video has passed the defined loop end point.
We use the looping variable as a flag, to ensure that this function will only be active if the video is not already playing... in which case, looping would be true
function startVideoLoop() {
if (!looping) {
videoAPI.currentTime = 0; // Start video from the beginning
videoAPI.play();
// Setup interval to check end point for looping
intervalID = setInterval(checkEndPoint, interval);
looping = true;
}
}
We therefore need to define this verifier, which is invoked at regular intervals. The interval is defined by the variable interval
function checkEndPoint() {
if (videoAPI.currentTime > end) {
videoAPI.currentTime = start; // Reset to start point when end point is reached
}
}
In practice, if the video time exceeds the defined end point, the playback head is moved back to the defined start point.
Before anything else, we need to define the start and end points... two approaches are possible, either we define them manually by specifying a time in milliseconds, or dynamically according to the duration of the video.
In the first case, nothing complex, but in the second, we must first ensure that the browser has loaded the necessary information before proceeding with this initialization. To do this, we need to use a listener that will take charge of this operation
videoAPI.addEventListener('loadedmetadata', function() {
start = videoAPI.duration / 4; // first quarter of total duration
end = start * 3; // third quarter
});
We're almost there... we have to take care of launching the playback through the button... the function associated with this listener will have a double task, driving the video and the text inscribed on the button, both alternating between two functions, play, pause...
playPauseButton.addEventListener('click', function() {
if (videoAPI.paused) {
startVideoLoop();
playPauseButton.textContent = "Stop";
} else {
stopVideoLoop();
playPauseButton.textContent = "Play";
}
});
All that's left is to stop the video and the mechanism using the stopVideoLoop() function.
function stopVideoLoop() {
if (looping) {
clearInterval(intervalID); // Stop the interval timer
videoAPI.pause();
looping = false;
}
}
You can find the finalized script on the https://demo.puce-et-media.com/ApolloGT/video-1.html link.
Please don't hesitate if you need further information, and once again, sorry for the delay
Copy link to clipboard
Copied
@ApolloGT would you mind if I post this post as an article on Puce et Média website ?
Copy link to clipboard
Copied
thank you so much. i will give it a try when i have free time to try again. I don't mind if you post it on Puce.
Copy link to clipboard
Copied
I don't mind if you post it on Puce.
By @ApolloGT
Thank you very much. In order to illustrate the article with a well-founded use case, could you please tell me a little more about why you want to set up such a loop, and why not use your video as a medium for the article, if it doesn't contain any usage and rights to be respected.
Copy link to clipboard
Copied
i don't mind but because of the time frame i have moved on to using a different video before i saw your post. when i have another video to do this again i'll like to do it with you to make sure it works. how can i contact you directly?
Copy link to clipboard
Copied
Please don't hesitate to re-post to this thread, or create a new one. You can also, click on the profil name of any user and instantlly get access to an internal personnal message.
I'm glad if it helps !