vue+flv播放flv视频、m3u8视频,谷歌浏览器视频不自动播放怎么办

admin管理员组

文章数量:1538748

播放flv视频

<template>
  <div id="app1">
    <video id="myvideo" @click="click"
           controls = "true"
           height="500"
           width="auto"
           muted
    ></video>
  </div>
</template>

<script>
import flv from 'flv.js'

export default {
  name: 'app1',
  data () {
    return {
      player: null,
      playing: true
    }
  },
  created () {
    if (flv.isSupported()) {
      this.player = flv.createPlayer({
        type: 'flv',
        url: 'https://api.tjdataspace/flv.flv'
      })
    }
  },
  mounted () {
    var video = document.querySelector('#myvideo')
    this.player.attachMediaElement(video)
    this.player.load()
    this.player.play()
  },
  methods: {
    click () {
      if (this.playing) {
        this.player.pause()
        this.playing = false
      } else {
        this.player.play()
        this.playing = true
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#p
{
  width:1000px;
}
</style>

播放m3u8视频

main.js

npm  install video.js
npm i videojs-contrib-hls -S 

import 'video.js/dist/video-js.css'

<template>
  <div >
    <video muted id="my-video" class="video-js vjs-default-skin"
           controls = 'true'
           preload="auto"
           ref="video"
           height="500"
           width="auto">
    </video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
  name: 'Test6',
  data () {
    return {
      player: ''
    }
  },
  mounted () {
    // var vm = this
    /* this.player = videojs('my-video', {
      bigPlayButton: false,
      textTrackDisplay: false,
      posterImage: true,
      errorDisplay: false,
      controlBar: true
    }, function () {
      vm.player.play()
      // this.$refs.video.play()
    }) */
    this.player = videojs(document.getElementById('my-video'), {
      controls: true, // 是否显示控制条
      poster: 'xxx', // 视频封面图地址
      preload: 'auto',
      autoplay: true,
      fluid: true, // 自适应宽高
      language: 'zh-CN', // 设置语言
      // muted: false, // 是否静音
      inactivityTimeout: false,
      controlBar: { // 设置控制条组件
        /* 设置控制条里面组件的相关属性及显示与否
        'currentTimeDisplay':true,
        'timeDivider':true,
        'durationDisplay':true,
        'remainingTimeDisplay':false,
        volumePanel: {
          inline: false,
        }
        */
        /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
        children: [
          { name: 'playToggle' }, // 播放按钮
          { name: 'currentTimeDisplay' }, // 当前已播放时间
          { name: 'progressControl' }, // 播放进度条
          { name: 'durationDisplay' }, // 总时间
          { // 倍数播放
            name: 'playbackRateMenuButton',
            playbackRates: [0.5, 1, 1.5, 2, 2.5]
          },
          {
            name: 'volumePanel', // 音量控制
            inline: false // 不使用水平方式
          },
          { name: 'FullscreenToggle' } // 全屏
        ]
      },
      sources: [ // 视频源
        {
          src: 'https://play.mms.cainiao/cainiao/live_DPSDK_CORE_STREAMTYPE_SUB_183332968040947739.m3u8',
          type: 'application/x-mpegURL'
          // poster: '//vjs.zencdn/v/oceans.png'
        }
      ]
    }, function () {
      console.log('视频可以播放了', this)
      this.play()
    })
  }
}
</script>

<style scoped>
</style>

谷歌浏览器视频不自动播放怎么办

加muted属性设置为静音模式，并将autoplay设置为true

autoplay: true,

本文标签： 视频自动播放浏览器vueFLV