H5之隨機切換小視頻

時間 2019-11-09

標籤 h5 隨機切換視頻简体版

原文原文鏈接

給 video 標籤的 src 設置隨機url地址

var videoList = [
    "http://1570433780207_9396.mp4",
    ...
    'xxx.mp4'
  ];
  
  // 獲取視頻
  function autoVideo() {

    // 隨機獲取一條視頻數據
    var rand = Math.floor(Math.random() * videoList.length + 1) - 1;
    console.log(rand, 'rand')
    var randIndex = videoList[rand];
    console.log(randIndex)

    // 綁定的數據
    var str = '';
    var url = randIndex;
    str +=
      '<video id="video" autoplay="autoplay" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" style="object-fit:fill">'
    str += '<source src="' + url + '" type="video/mp4">'
    str += '</source>'
    str += '</video>'
    $('.videoBox').html(str)
  };
  autoVideo()
  
  //播放完畢繼續播放下一條
  window.video.onended = function () {
    var rand = Math.floor(Math.random() * videoList.length + 1) - 1;
    var randIndex = videoList[rand];
    console.log(randIndex, 'randIndex')
    //監聽video.onended 視頻播放完，隨機綁定新的src連接，播放下一條視頻
    this.src = randIndex;
  }
複製代碼

給 img 標籤加隨機背景圖片，刷新頁面隨機切換背景圖片

<style>
        .wrap {
          width: 100%;
          height: 13.34rem;
          font-size: 0.3rem;
          background-color: #ffe8bc;
          color: #875a5a;
          margin: auto;
          text-align: center;
        }

        .wrap .randomImg {
          width: 100%;
          height: 10rem;
        }
    </style>
    
    <body>
        <div class="wrap">
            <!--設置隨機背景圖片-->
            <div class="randomImg" id="randomImg"></div>
        </div>
    </body>
    
    <script>
        bgImg = new Array(2);
        bgImg[0] = '../img/1.png';
        bgImg[1] = '../img/2.png';
        bgImg[2] = '../img/3.png';
        bgImg[3] = '../img/4.png';
        index = Math.floor(Math.random() * bgImg.length);
        $('.randomImg').css('background', 'url(' + bgImg[index] + ')');
        $('.randomImg').css('backgroundSize', 'cover');
    </script>
    
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。