vue中使用video组件来播放m3u8

2022-04-14 13:37:32 阅读:1 编辑
npm install --save hls.js
<template>
  <div style="margin-top: 100px;">
    <span class="text" @click="click">Hello</span>
    <video  class="xqvideoss"   ref="videoRef"  controls></video>
  </div>
</template>
<style scoped>
  .text{
    font-size: 50px;
  }
</style>
<script>
    import Hls from 'hls.js';
    import wx from './../../common/wx'
    export default {
        data:function () {
            return {
            };
        },
        mixins: [require('./../../common/publish').publish],
        methods:{
        },
        mounted:function () {
            var hls = new Hls();
            hls.loadSource('http://xx/yy.m3u8');
            hls.attachMedia(this.$refs.videoRef);
            hls.on(Hls.Events.MANIFEST_PARSED,function() {
                this.$refs.videoRef.play();
            });
        },
        created:function () {
            //console.log("index created");
        },
        methods:{
            click(){
                wx.setClipboardData({data:"hello"})
            }
        }
    }
</script>