一、前言

uniapp項(xiàng)目，運(yùn)行在手機(jī)瀏覽器端，需要播放m3u8類型視頻。在網(wǎng)上找了好久教程，記錄一下實(shí)現(xiàn)過(guò)程。

參考了：uni-app npm方式引入video.js教程 支持H5播放m3u8、mp4等格式視頻文件_npm video.js_wang_9909的博客-CSDN博客

以及videojs官網(wǎng)。

二、步驟

1、安裝videojs

npm install --save-dev video.js

2、在main.js中加以下三行代碼

import Videojs from '!video.js' // 一定要加!
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs

3、頁(yè)面使用videojs

<template>
  <div id="app">
    <div class="video-js" ref="videos" style="width: 100%;height: 100%;"></div>
  </div>
</template>
 
<script>
  export default {
    mounted() {
      let video = document.createElement('video');
      video.id = 'video';
      video.style = 'width: 100%; height: 100%;';
      video.controls = true;
      video.preload = "auto"
      video.setAttribute('playsinline', true) //IOS微信瀏覽器支持小窗內(nèi)播放
      video.setAttribute('webkit-playsinline', true) //這個(gè)bai屬性是ios 10中設(shè)置可以讓視頻在小du窗內(nèi)播放，也就是不是全zhi屏播放的video標(biāo)簽的一個(gè)屬性
      video.setAttribute('x5-video-player-type', 'h5') //安卓 聲明啟用同層H5播放器 可以在video上面加?xùn)|西
      let source = document.createElement('source');
      source.src =
        'http://183.167.196.100:83/openUrl/nBgOnDy/live.m3u8';
      video.appendChild(source);
      // return
      this.$refs.videos.appendChild(video);
      let that = this;
      let player = this.$video('video', {
        poster: '', // 視頻封面圖地址
        title: '4564564',
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoDisable: true,
        preload: 'none', //auto - 當(dāng)頁(yè)面加載后載入整個(gè)視頻 meta - 當(dāng)頁(yè)面加載后只載入元數(shù)據(jù) none - 當(dāng)頁(yè)面加載后不載入視頻
        language: 'zh-CN',
        fluid: true, // 自適應(yīng)寬高
        muted: false, //  是否靜音
        aspectRatio: '16:9', // 將播放器置于流暢模式，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
        controls: true, //是否擁有控制條 【默認(rèn)true】,如果設(shè)為false ,那么只能通過(guò)api進(jìn)行控制了。也就是說(shuō)界面上不會(huì)出現(xiàn)任何控制按鈕
        autoplay: false, //如果true,瀏覽器準(zhǔn)備好時(shí)開(kāi)始回放。 autoplay: "muted", // //自動(dòng)播放屬性,muted:靜音播放
        loop: true, // 導(dǎo)致視頻一結(jié)束就重新開(kāi)始。 視頻播放結(jié)束后，是否循環(huán)播放
        screenshot: true,
        controlBar: {
          volumePanel: { //聲音樣式
            inline: false // 不使用水平方式
          },
          timeDivider: true, // 時(shí)間分割線
          durationDisplay: true, // 總時(shí)間
          progressControl: true, // 進(jìn)度條
          remainingTimeDisplay: true, //當(dāng)前以播放時(shí)間
          fullscreenToggle: true, //全屏按鈕
          pictureInPictureToggle: true, //畫中畫
        }
      }, function() {
        this.on('error', function(err) { //請(qǐng)求數(shù)據(jù)時(shí)遇到錯(cuò)誤
          console.log("請(qǐng)求數(shù)據(jù)時(shí)遇到錯(cuò)誤", err)
        });
        this.on('stalled', function(stalled) { //網(wǎng)速失速
          console.log("網(wǎng)速失速", stalled)
        });
      });
    }
  }
</script>
 
<style>
  #app {
    width: 100vw;
    height: 100vh;
  }
</style>

三、其他

1、未解決問(wèn)題：項(xiàng)目運(yùn)行在pc端的谷歌瀏覽器，可以展示視頻，但是控制條樣式比較丑，而且不顯示時(shí)間條，代碼中已經(jīng)加了時(shí)間條的東西，但是還是不顯示，也沒(méi)有成功改掉控制條樣式；

2、初始化的代碼寫在mounted中了，嘗試把mounted改為onReady、onShow、onLoad都不行，會(huì)報(bào)appendChild相關(guān)錯(cuò)誤。

3、m3u8類型的視頻直接放在pc端的谷歌瀏覽器無(wú)法播放，可以采用工具網(wǎng)站：M3U8在線播放器 - 劉明野的工具箱

最后，歡迎大家討論學(xué)習(xí)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-722353.html

到了這里，關(guān)于uniapp的H5項(xiàng)目使用videojs播放m3u8類型視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！