تشغيل فيديوهات عشوائية باستخدام الجافا سكريبت

يمكنك عمل ذلك بدون اي مكتبات خارجية ويمكنك عمله بإستخدام مكتبة 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

وبالتوفيق لك ..

لا بأس يمكننا عمل ذلك عبر اضافة بعض الشروط والحلقات للكود ليصبح كالتالي 

        var videos = [
            "video1.mp4",
            "video2.mp4",
            "video3.mp4"
        ];

        var playedVideos = [];
        var currentVideoIndex = -1;

        function playRandomVideo() {
            var randomIndex;
            do {
                randomIndex = Math.floor(Math.random() * videos.length);
            } while (playedVideos.includes(randomIndex));

            playedVideos.push(randomIndex);

            var videoUrl = videos[randomIndex];
            var videoPlayer = document.getElementById("videoPlayer");
            videoPlayer.src = videoUrl;
            videoPlayer.play();

            if (playedVideos.length === videos.length) {
                document.querySelector("button").disabled = true;
            }
        }

وهذا شرح بسيط عن التعديلات التي قمت باجرائها

• اضفت مصفوفة playedVideos لتخزين الفيديوهات التي تم تشغيلها بها كيف نضمن ان لا يتم تكرارها 
• استخدمت الحلقة do while  للتحقق من عدم تكرار نفس الفيديو عن طريق اعطاء كل فيديو رقم خاص به من 0 وحتى عدد اخر فيديو 
• بعد تشغيل الفيديو يتم اضافته الى playedVideos للتأكد من عدم تشغيله مرة اخرى 
• وبعد تشغيل جميع الفيديوهات بنجاح يتم ايقاف زر تشغيل الفيديوهات لعدم تكرارها 

وبالتوفيق لك ..

الحمد لله اشتغل بعد ما جربات طرق كتير 

معلش بس تعديل صغير عشان لسه مبدأتش جافا

ممكن تزود انه لو شغل فيديو ميكرروش تاني الا لو المكتبة خلصت
وبرضه بعد ما يشغل عدد فيديوهات معين يثبت علي فيديو واحد بس ميشغلش غيره

متشكر جدا، كل سنة وانت طيب ❤️

بتاريخ 15 ساعة قال Mohamed Atia4:

ممكن تزود انه لو شغل فيديو ميكرروش تاني الا لو المكتبة خلصت

في البداية أحب أن أوضح شيئًا، وهو أنه لا مانع من تكرار الفيديو فلو لاحظت معظم المواقع أو حتى أنظمة التشغيل عندما تريد عرض صور عشوائية ربما يحدث تكرار لهذه الصور، فتجد صورة تظهر كثيرًا وربما تظهر مرتين متتاليتين وبعض الصور تكون نادرة الظهور، كل هذا تابع للرقم العشوائي الذي يتم توليده.

أما إذا تريد عدم تكرار أي فيديو حتى يتم الانتهاء من القائمة كلها، سأذكر لك طريقة التفكير وأترك لك تطبيقها بالشيفرات حتى تنمي مهاراتك.

الفكرة تعتمد على:

كل فيديو يتم عرضه نقوم بإزالته من القائمة الأساسية (التي هي في حالتنا المتغير الذي توعه مصفوفة array واسمه videos)، ثم حفظه في مصفوفة أخرى جانبية، وعندما يتم عرض جميع العناصر (أي تفريغ المصفوفة الأساسية)، نقوم بملئها مرة أخرى من المصفوفة الفرعية وتفريغ المصفوفة الفرعية

$(document).ready(function() {
  var videos = [
    "video1.mp4",
    "video2.mp4",
    "video3.mp4"
  ];

  // مصفوفة فرعية	
  var displayedVideos = [];

        $("#playRandomButton").click(function() {
          // في هذا المكان مطلوب اختبار المصفوفة الأساسية إذا فارغة نملأها من المصفوفة الفرعية ونفرغ الفرعية
            var randomIndex = Math.floor(Math.random() * videos.length);
            var videoUrl = videos[randomIndex];
          // في هذا المكان مطلوب حذف العنصر الذي تم اختياره عشوائيًا من المصفوفة الأاساسية وإضافته للفرعية
            $("#videoPlayer").attr("src", videoUrl);
            $("#videoPlayer")[0].play();
        });
    });