يمكنك عمل ذلك بدون اي مكتبات خارجية ويمكنك عمله بإستخدام مكتبة jquery ساعطيك الطريقتان وستختار ما يتناسب مع احتياجات مشروعك
بدون مكتبات :
ننشئ عنصر فيديو في ملف ال html لنعرض الفيديوهات به واعطيناه id مميز لاستخدامه لاحقا , كما انني اعطيته حدث عن الضغط على الزر واسندت اليه اسم الدالة التي سنعمل عليها في كود الجافا سكريبت
<video controls id="videoPlayer"></video>
<button onclick="playRandomVideo()">تشغيل فيديو عشوائي</button>
انشأت في البداية مصفوفة تحتوي على عنوانين الفيديوهات (ستقوم باستبدالها بالمسار الاساسي للفيديوهات الخاصة بك او بعنوان url )
واستخدمت الدالة Math.random() لاختيار فيديو عشوائي
var videos = [
"video1.mp4",
"video2.mp4",
"video3.mp4"
];
function playRandomVideo() {
var randomIndex = Math.floor(Math.random() * videos.length);
var videoUrl = videos[randomIndex];
var videoPlayer = document.getElementById("videoPlayer");
videoPlayer.src = videoUrl;
videoPlayer.play();
}
باستخدام مكتبة jQuery :
اول خطوة هي تضمين المكتبة لدينا
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
ثم كما عملنا سابقا نضع وسم الفيديو وزر التشغيل في ملف ال html
<video controls id="videoPlayer"></video>
<button id="playRandomButton">تشغيل فيديو عشوائي</button>
وفي ملف الجافا سكريبت ستضع الكود التالي :
$(document).ready(function() {
var videos = [
"video1.mp4",
"video2.mp4",
"video3.mp4"
];
$("#playRandomButton").click(function() {
var randomIndex = Math.floor(Math.random() * videos.length);
var videoUrl = videos[randomIndex];
$("#videoPlayer").attr("src", videoUrl);
$("#videoPlayer")[0].play();
});
});
الطريقة ذاتها ولكن ما يختلف هو طريقة الكتابة التي تستخدمها مكتبة jQuery
وبالتوفيق لك ..