自動全屏html5視頻播放？

Question

我有兩個小孩（3歲和4歲），他們喜歡整天在平板電腦/台式機上觀看動畫片。 因此，我已經在服務器上上傳了大量的動畫片。 當他們點擊/單擊鏈接時，有沒有辦法讓我上傳的卡通從隨機視頻中以隨機順序和循環播放全屏模式開始！ 我對html5編碼不太熟悉，所以請您在打開頁面時給我一個最簡單的代碼，以進行自動全屏視頻播放...非常感謝！

Answer 1

這應該工作：

使用1個具有自動播放屬性的視頻標簽創建一個空的html頁面
然后使用JavaScript創建要播放的視頻的所有路徑的數組
將功能附加到視頻標簽的“結束”事件
在函數內部生成隨機索引Math.floor(Math.random() * clipPaths.length);
使用生成的索引從數組中獲取隨機路徑
將路徑設置為視頻代碼的“ src”屬性

您只需要將所有路徑放入clipPaths數組中即可。

 <!DOCTYPE html>
<html>
<head>
  <style>
  video#myVideo { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    background-size: cover; 
}
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<video id="myVideo" controls autoplay>

</video>
  <script>
    clipPaths = [
      'https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv',
      'http://techslides.com/demos/sample-videos/small.mp4',
      'http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4'

    ];
    var myVideo = document.getElementById('myVideo');
    myVideo.addEventListener('ended',myHandler,false);

    function myHandler(e) {
      var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];
      myVideo.setAttribute('src',randClip);
    }
    var randClip = clipPaths[Math.floor(Math.random() * clipPaths.length)];

    myVideo.setAttribute('src',randClip);


  </script>
  </body>
</html>

鏈接到工作示例鏈接

自動全屏html5視頻播放？

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-13 12:36:15

自動全屏html5視頻播放？

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-13 12:36:15

解決方案1
0 已采納 2016-01-13 12:36:15