Can Dreamweaver LOOP video at certain FRAME?

[ApolloGT]

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.

[Nancy OShea · Accepted solution]

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.

[ApolloGT]

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.

[Nancy OShea]

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.

[BenPleysier]

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/

[Nancy OShea]

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."

[BenPleysier]

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.

[ApolloGT]

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.

[Nancy OShea]

That's not something HTML can do. Sorry.

[L e n a]

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.

[ApolloGT]

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.

[L e n a]

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

[ApolloGT]

thank you. i still think Adobe should look into improving this option for future video playback imbeded in dreamweaver

[Nancy OShea]

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

[ApolloGT]

like nothing ever happened, except for our money going into you bank account.

[L e n a]

@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 :

• Go to the demo link https://demo.puce-et-media.com/ApolloGT/video.html,
• You should find only three buttons on the page: 1 active and 2 grayout.

• Click on the Add Video button to add a video to the page.
• Buttons activation will therefore be reversed
• If you now click on the Full Video button, you'll see that the video shows a ball rotating 360° around an axis and then stopping.
• But if you click on the button, Play truncated Video Loop, then the same video will show a ball rotating around an axis, from the start 0°, but then will loop between two points, which I have arbitrarily defined as one quarter and three quarters of the video's duration.... so between 90° and 270°.

Isn't that the scenario you were looking for?

[ApolloGT]

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

[ApolloGT]

i might need more help to understand it.

[L e n a]

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

• Start time for the truncated loop (relative to the video duration)
• End time for the truncated loop (relative to the video duration)
• Interval (in milliseconds) for checking the end point within the loop, correponding to 1000ms/30img/s
• intervalID = null; pointer to the interval caller
• looping Flag to indicate whether the video is currently playing

<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

[L e n a]

@ApolloGT would you mind if I post this post as an article on Puce et Média website ?

[ApolloGT]

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.

[L e n a]

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.

[ApolloGT]

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?

[L e n a]

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 !