Skip to content

can make a video playlist play randomly? #644

Description

@jesusbc1981

hello is there any way to add the function in the javascript and enable the option in the menu?
a try this dont work:

<video id="myPlayer" width="640" height="360" controls>
<source src="video1.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>'

<ul id="myPlaylist" class="able-playlist" data-player="myPlayer">
<li data-src="video1.mp4">Video 1</li>
<li data-src="video2.mp4">Video 2</li>
<li data-src="video3.mp4">Video 3</li>
</ul>

<script>
// Function to shuffle an array
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

// Get the playlist items
const playlist = document.getElementById('myPlaylist');
const playlistItems = Array.from(playlist.children);

// Shuffle the playlist items
const shuffledItems = shuffleArray(playlistItems);

// Clear the existing playlist
playlist.innerHTML = '';

// Add the shuffled items back to the playlist
shuffledItems.forEach(item => playlist.appendChild(item));

// Initialize Able Player (assuming you have the Able Player library loaded)
const myPlayer = new AblePlayer(document.getElementById('myPlayer'));
</script>

Activity

  1. joedolson commented on Jul 9, 2025

    @joedolson
    Member

    The simplest way to achieve this would be to have your shuffle happen in the source code; Able Player will load the videos in the order they're found, but it would be a relatively minor task on the server side to shuffle the original source output.

    What's the use case?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions