<script>
import { inject, watch } from 'vue'
import { Options, Vue } from "vue-class-component";
import AudioPoster from "./AudioPoster";
import MediaFrame from "./MediaFrame";

@Options({
  components: {
    AudioPoster,
    MediaFrame,
  },
})
class AudioFrame extends Vue {
  constructor(props) {
    super(props);

    this.mediaStatus = inject('mediaStatus');

    this.audioUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MediaDemo/components/frames/AudioFrame/demo_test.mp3";
    // is.audioUrl = "http://192.168.1.99/videos/empty.mp3";
  }
}

export default AudioFrame;
</script>

<template>
<MediaFrame
  tagName="audio"
  :src="audioUrl"
/>

<AudioPoster
  :playing="this.mediaStatus.playing"
/>
</template>

<style scoped>
</style>
