video標簽設置autoplay在手機瀏覽器無法自動播放視頻的解決方案

2019-05-27 網頁設計
  • 文章介紹
在video標簽上加個autoplay屬性,在PC端瀏覽器里面運行流暢,但是在手機瀏覽器里面打開無法播放。原來現在的手機瀏覽器是不允許網頁中視頻自動播放的,只有與用戶進行了一次交互動作,才可以播放視頻。(音頻同理)
 
方案一:在頁面上加一個彈框,用戶點擊了彈框之后(相當于一次交互完成),開始播放視頻,發現是可以播放的,部分代碼如下:
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">
  <title>跟版網-視頻自動播放</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
    }
    .video-container {
      width: 300px;
      height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin: 0 auto;
    }
    #video {
      display: block;
      width: 100%;
    }
    #mask {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.83);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }
    .pop-container {
      width: 250px;
      height: 200px;
      background: white;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    button {
      width: 50px;
      height: 30px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

<div class="video-container">
  <video id="video" src="video.mp4"></video>
</div>
<div id="mask">
  <div class="pop-container">
    <p>頁面內有自動播放視頻 請注意流量</p>
    <button onclick="playVideo()">我知道了</button>
  </div>
</div>
<script>
  function playVideo() {
    document.getElementById('mask').style.display = 'none';
    var video = document.querySelector('#video');
    video.play();
  }
</script>
</body>
</html>
 
方案2:使用jsmpeg.js
 
jsmpeg是一款視頻解碼器,具體怎么用,可以百度相關文檔,實話說我對此也不熟悉,第一次聽見的時候是聽說jsmpeg可以實現網頁端的視頻直播功能,這一次用來解決視頻自動播放的需求也是借鑒別人的想法。
關鍵代碼如下:(前提:項目中已經引入了jsmpeg.min.js)
 
<canvas id="canvas" height="750" width="750"></canvas>
頁面加載完成的時候執行下面的js代碼:
var canvas = document.querySelector('#canvas');
// 注意這里需要將video.mp4轉換成ts格式的文件 才能生效
var player = new JSMpeg.Player('video.ts', { canvas: canvas, loop: false, autoplay: false, audio: true });
player.audioOut.unlock(this.onUnlocked);
player.play();

//  onUnlocked方法
function onUnlocked() {
    player.volume = 1;
}
 
這樣即使不跟用戶產生交互 視頻也能自動播放了,
注意點
1.demo必須放在服務器上面跑才能正常加載ts文件,如果是在本地的話,不能直接拖進瀏覽器運行,需要起個本地服務器
2.ts文件編碼方式必須為MPEG編碼,考慮到現在先進的ts編碼方式是H.264了,之前用H.264編碼的ts發現播放不了
存在的問題
1.這樣播出的視頻是沒有聲音的
 

上一篇:織夢DedeCms做SEO優化必做的步驟

下一篇:js 判斷字符串中是否包含某個字符串

專業的織夢模板定制下載站,在線購買后即可下載!

商業源碼

跟版網模板,累計幫助5000+客戶企業成功建站,為草根創業提供助力!

立刻開啟你的建站之旅
QQ在線客服

服務熱線

織夢建站咨詢
北京快乐8公式全天计划