Simple solution to preview *.mp4 videos in html video-tag. Javascript could be better

Viewed 30

I spent a lot of time trying to find a solution. I tried to blob the video or parse the header. But it doesn't have to be. In the code you can see that it is easier. The video should start immediately without sound as a design element and provide a preview as you know it. I have not increased the playback speed in this example. However, the javascript code is really ugly. I would like to improve my understanding of javascript. Can you help me to make the code more elegant. I have tried a for-await-loop in for-await-loop and other async stuff, but unfortunately without success.

<!-- Click on the overlay to start the video and activate controls and sound. -->
<div style=" z-index: 2000;height: 100px;font-size: 50px;position: absolute;top:30%;left:5%;">
    <h2 onclick="startVideo(this)"
        style="color:white;background-color: rgba(3,3,6,0.73);cursor: pointer;padding:15px">
        PLAY VIDEO
    </h2>
</div>
 
<h1 onclick="startVideo(this)" style="cursor: pointer;padding:15px"> Play Video </h1>

<!-- Load metadata only and turn off the sound -->
<video  id="video1" src="https://example.com/mp4-file.mp4" type="video/mp4" controls
         preload="metadata"   muted="muted"
> 
</video>


<script>
function startVideo ( element ) {
    element.style.display = "none";
    is_preview = false;
    seekToTime( 0 );
    video_element.controls = true;
    video_element.muted = false;
    video_element.play();

}

function playPreview () {
    //Jump to the next position every 3 seconds.
    //It should be a loop.
    // Here the preview_cycle_time could be added together.
    // The percentages could be read from an array.
    // Variable snippet times could be read from an array too.
    setTimeout( function () {
        if ( is_preview ) seekToTime( ( video_element.duration / 10.0 ) );// 10%
        preview_cycle_time = preview_cycle_time + preview_snippet_time;
    }, 3000 )
    setTimeout( function () {
        if ( is_preview ) seekToTime( ( video_element.duration / 10.0 * 2.0 ) );// 20%
    }, 6000 )
    setTimeout( function () {
        if ( is_preview ) seekToTime( ( video_element.duration / 10.0 * 4.0 ) );// 40%
    }, 9000 )
    setTimeout( function () {
        if ( is_preview ) seekToTime( ( video_element.duration / 10.0 * 6.0 ) );// 60%
    }, 12000 )
    setTimeout( function () {
        if ( is_preview ) seekToTime( ( video_element.duration / 10.0 * 8.0 ) );// 80%
    }, 15000 )
    setTimeout( function () {
        if ( is_preview ) seekToTime( ( video_element.duration - 3.0 ) );//last 3sec
    }, 18000 )
}

function seekToTime ( ts ) {
    video_element.controls = false;//Turn off controls so they don't flicker in and out on pause and play.
    video_element.pause();
    video_element.currentTime = ts;
    let timer = setInterval( function () {
        if ( video_element.paused && video_element.readyState === 4 || !video_element.paused ) {
            video_element.play();
            clearInterval( timer );
        }
    }, 50 );

}

let is_preview = true;
let video_element = document.querySelector( 'video' );
let start_time = 0;
let delay = 2000;// The delay is used to load the page
let preview_cycle_time = 0;
let preview_snippet_time = 3000;//3 sec per video snippet

video_element.onloadstart = function () {
    //Play the preview every 20sec. 5 times in total.
    //It should be a loop.
    setTimeout( function () {
        if ( is_preview ) playPreview();
    }, delay )
    setTimeout( function () {
        if ( is_preview ) playPreview();
    }, 20000 )// Here you would need the preview_cycle_time as the return value of   playPreview(),if the times are variable.

    if ( is_preview ) setTimeout( function () {
        if ( is_preview ) playPreview();
    }, 40000 )
    if ( is_preview ) setTimeout( function () {
        if ( is_preview ) playPreview();
    }, 60000 )
    if ( is_preview ) setTimeout( function () {
        if ( is_preview ) playPreview();
    }, 80000 )
    if ( is_preview ) setTimeout( function () {
        if ( is_preview ) playPreview();
    }, 100000 )
    if ( is_preview ) setTimeout( function () {
        if ( is_preview ) playPreview();
    }, 120000 )
};


</script>
0 Answers
Related