Random video + delay với javascript

Rumi_nya · December 8, 2015, 3:52pm

Mình muốn làm một cái iframe để nhúng vào soft.
Yêu cầu là chạy random một video có sẵn, load lại một video random khác khi:
_ sau một khoảng thời gian đặt trước.
_ sau khi video hiện tại chạy hết.
làm cái nào cũng được, cả hai cái thì càng tốt, mỗi cái code riêng.

Sau mấy ngày mò thì code được thế này
Tạo 1 array chứa các link src, một hàm gọi random các link đó gắn vào iframe, sau đó đặt timer delay.
Cứ mỗi 10s sẽ tự động load lại một src khác và reload iframe --> chạy video khác.

code:

<iframe id="rdvideo" width="300" height="200" src="" allowfullscreen>
</iframe>

<script language="javascript">
//array links
var randomvideo=new Array()
    randomvideo[0]="https://www.youtube.com/embed/XhwRXOkyLM0?autoplay=1";
    randomvideo[1]="https://www.youtube.com/embed/YsTGTwqNfsQ?autoplay=1";
    randomvideo[2]="https://www.youtube.com/embed/JFBUJ6kNl28?autoplay=1";
  
//function gets link src
function getRandomUrl() 
{
   var myFrame = document.getElementById('rdvideo');
   myFrame.src = randomvideo[Math.floor(Math.random()*randomvideo.length)];
   getElementById('rdvideo').contentDocument.location.reload(); //reload page
}

var delay = 10000; //delay 10s
setInterval(getRandomUrl(), delay);

</script>

test trên trang này:
https://jsfiddle.net/

Nhưng kết quả là chỉ chạy nếu bấm f5, không tự load lại khi hết thời gian delay.
tới đây thì bí, cần giúp đỡ…

DavisNguyen · December 10, 2015, 6:37am

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

nguyenchiemminhvu · December 8, 2015, 2:44pm

Bạn tạo sự kiện onload đặt ở thẻ body thì mỗi lần refresh trang nó sẽ tự chạy function đó.

Rumi_nya · December 8, 2015, 3:46pm

có ai bấm vào link mà thấy đoạn code đó không, hình như nó chỉ save phần hoạt động chứ không save code.

<iframe id="rdvideo" width="300" height="200" src="" allowfullscreen>
</iframe>

<script language="javascript">
//array links
var randomvideo=new Array()
    randomvideo[0]="https://www.youtube.com/embed/XhwRXOkyLM0?autoplay=1";
    randomvideo[1]="https://www.youtube.com/embed/YsTGTwqNfsQ?autoplay=1";
  randomvideo[2]="https://www.youtube.com/embed/JFBUJ6kNl28?autoplay=1";
  
//function gets link src
function getRandomUrl() 
{
   var myFrame = document.getElementById('rdvideo');
   myFrame.src = randomvideo[Math.floor(Math.random()*randomvideo.length)];
   getElementById('rdvideo').contentDocument.location.reload(); //reload page
}

var delay = 10000; //delay 10s
setInterval(getRandomUrl(), delay);

</script>

Rumi_nya · December 8, 2015, 4:03pm

@nguyenchiemminhvu: mình đang muốn nó tự động load sau khoảng thời gian đặt trước chứ không phải gọi function khi load.

@DavisNguyen: cả 2 đều không, mình đang làm code cho soft quảng cáo.

nguyenchiemminhvu · December 8, 2015, 5:12pm

Trong javascript có thể gọi đặt timer cho function bằng setTimeout hay setInterval tùy mục đích.

vhnam · December 8, 2015, 5:22pm

Nếu làm với YouTube thì bạn xài YouTube API của nó cho dễ thao tác

Rumi_nya · December 9, 2015, 1:52am

@vhnam: phần demo sử dụng youtube vì nó cũng khá thông dụng + có thể chạy ở web công cộng chứ mình không chỉ làm với nó, link video của mình có thể sẽ phải lấy từ nhiều nguồn, ko chỉ youtube nên ko xài youtube API được.

@nguyenchiemminhvu: trong code ở trên mình có đang sử dụng setInterval:
setInterval(getRandomUrl(), delay);
nó vẫn lấy được link random nhưng không gọi lại khi hết thời gian delay.

Vong_Hoang_Tuong · December 9, 2015, 1:58pm

Thế này chắc đúng ý bạn chứ?

http://jsfiddle.net/baivong/0k22yw81/

<div id="player"></div> 
<script>
(function(window, document, undefined) {

    'use strict';

    function removeElement(array, element) {
        return array.filter(function(el) {
            return el !== element
        });
    }

    function changeVideo() {
        if (player.getCurrentTime() >= delay) {
            var currentVideo = player.getVideoData().video_id,
                randomVideo = removeElement(videoPlaylist, currentVideo)[Math.floor(Math.random() * (videoPlaylist.length - 1))];
            player.loadVideoById(randomVideo);
        }
    }

    function onPlayerStateChange(event) {
        clearInterval(repeat);
        if (event.data === 1) {
            repeat = setInterval(changeVideo, 500);
        }
    }

    window.onYouTubeIframeAPIReady = function() {
        var randomVideo = videoPlaylist[Math.floor(Math.random() * videoPlaylist.length)];
        player = new YT.Player('player', {
            height: '315',
            width: '560',
            videoId: randomVideo,
            playerVars: {
                'autoplay': 1,
                'controls': 0,
                'showinfo': 0,
                'iv_load_policy': 3
            },
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }

    var tag = document.createElement('script'),
        player,
        videoPlaylist = ['XhwRXOkyLM0', 'YsTGTwqNfsQ', 'JFBUJ6kNl28'],
        delay = 10, // s
        repeat;

    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

})(window, document);
</script>

Rumi_nya · December 9, 2015, 4:14am

Dù vẫn chưa hiểu code lắm (mù js) nhưng đúng là nó chạy chính xác như mình muốn, tks nhiều.
Cho mình hỏi thêm là cái này có thể viết bằng iframe được không bạn, mình không hiểu cái code của mình nó có vấn đề chỗ nào mà nó ko tự động reload được.

Vong_Hoang_Tuong · December 9, 2015, 4:36am

Chỉ cần thay src là được, dùng reload thì nó lại không hiện video. Script của bạn thì sửa thế này:

//array links
var randomvideo = new Array()
randomvideo[0] = "https://www.youtube.com/embed/XhwRXOkyLM0?autoplay=1";
randomvideo[1] = "https://www.youtube.com/embed/YsTGTwqNfsQ?autoplay=1";
randomvideo[2] = "https://www.youtube.com/embed/JFBUJ6kNl28?autoplay=1";

//function gets link src
function getRandomUrl() {
    var myFrame = document.getElementById('rdvideo');
    myFrame.src = randomvideo[Math.floor(Math.random() * randomvideo.length)];
}

getRandomUrl();

var delay = 10000; //delay 10s
setInterval(getRandomUrl, delay);

Vì có thêm thời gian load ban đầu nữa nên video sẽ không chạy hết 10s (thường chỉ 7s), nếu người xem dừng video lại lúc 1s thì nó vẫn chuyển sang video khác khi hết 10s chờ. Khi random sẽ có trường hợp trùng video vừa xem. Code mình viết dài hơn chút là để tránh các vấn đề đó.

Rumi_nya · December 9, 2015, 4:49am

lần đầu tiên xài js đúng là chưa nghĩ tới mấy vấn đề đó, tks

Vong_Hoang_Tuong · December 9, 2015, 1:58pm

Ah quên phần code sau khi video chạy hết chuyển sang video khác.

http://jsfiddle.net/baivong/emdbw0yg/

<div id="player"></div> 
<script>
(function(window, document, undefined) {

    'use strict';

    function onPlayerReady(event) {
        player.playVideo();
        player.setShuffle(true);
    }

    window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('player', {
            height: '315',
            width: '560',
            playerVars: {
                'showinfo': 0,
                'loop': 1,
                'iv_load_policy': 3,
                'playlist': 'XhwRXOkyLM0,YsTGTwqNfsQ,JFBUJ6kNl28'
            },
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    var tag = document.createElement('script'),
        player;

    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

})(window, document);
</script>

nguyenchiemminhvu · December 9, 2015, 7:50am

Sửa lại là

setInterval( getRandomUrl, delay );

coi thử xem sao.

Rumi_nya · December 10, 2015, 12:00am

Đoạn code này là bạn xài youtube API đúng ko?
với lại code này không autoplay video, khi mình thêm autoplay 1 vào:

playerVars: {
                'showinfo': 0,
                'autoplay': 1,
                'iv_load_policy': 3,
                'loop': 1,
                'playlist': 'XhwRXOkyLM0,YsTGTwqNfsQ,JFBUJ6kNl28'
            },

nó vẫn không chạy autoplay: ?_?

Rumi_nya · December 10, 2015, 12:08am

tks bạn, đúng là dòng đó viết hàm sai nên không chạy được.

Vong_Hoang_Tuong · December 10, 2015, 4:07am

Script mình viết là để tạo ra một playlist nên không có tham số autoplay, dòng để autoplay là:

player.playVideo();

Nguyên nhân nó không autoplay là vì dòng:

player.setShuffle(true);

Code này là để đảo ngẫu nhiên video trong playlist, mình đã sửa lại script để khắc phục vấn đề này, bạn thử lại xem.

;(function(window, document, undefined) {

    'use strict';

    function onPlayerReady() {
        player.playVideo();
        player.setShuffle(true);
    }

    function onPlayerStateChange(event) {
        if (event.data !== 2) {
            player.playVideo();
        }
    }

    window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('player', {
            height: '315',
            width: '560',
            playerVars: {
                'showinfo': 0,
                'controls': 0,
                'loop': 1,
                'iv_load_policy': 3,
                'playlist': 'XhwRXOkyLM0,YsTGTwqNfsQ,JFBUJ6kNl28'
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    var tag = document.createElement('script'),
        player;

    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

})(window, document);

Rumi_nya · December 10, 2015, 8:47am

chạy quá tốt rồi, hết gì để hỏi luôn rồi…