<template>
  <view class="player-container">
    <video 
      id="livePlayer"
      ref="videoPlayer"
      :src="streamUrl"
      autoplay
      controls
      style="width:100%;height:100%"
      @error="onPlayError"
      @play="onPlay"
      @pause="onPause"
    ></video>
    
    <view class="control-panel">
      <button @tap="startPlay" :disabled="isPlaying">开始播放</button>
      <button @tap="stopPlay" :disabled="!isPlaying">停止播放</button>
    </view>
    
    <view v-if="errorMsg" class="error-message">{{errorMsg}}</view>
  </view>
</template>

<script>
const DEFAULT_RTMP_URL = 'rtmp://your-zlm-server/live/stream';
const DEFAULT_WEBRTC_URL = 'webrtc://your-zlm-server/live/stream';

export default {
  data() {
    return {
      streamUrl: '',
      isPlaying: false,
      errorMsg: '',
      useWebRTC: false
    }
  },
  methods: {
    async startPlay() {
      try {
        this.errorMsg = '';
        
        // 根据协议选择URL
        this.streamUrl = this.useWebRTC ? DEFAULT_WEBRTC_URL : DEFAULT_RTMP_URL;
        
        // 如果是WebRTC且需要原生插件支持
        if(this.useWebRTC && uni.requireNativePlugin) {
          const webrtcPlugin = uni.requireNativePlugin('ZLMRTCClient');
          await webrtcPlugin.startPlay({
            url: this.streamUrl,
            viewId: 'livePlayer'
          });
        }
        
        this.isPlaying = true;
      } catch (e) {
        this.errorMsg = '播放失败: ' + e.message;
        console.error(e);
      }
    },
    stopPlay() {
      this.streamUrl = '';
      this.isPlaying = false;
    },
    onPlayError(e) {
      this.errorMsg = '播放错误: ' + e.detail.errMsg;
      this.isPlaying = false;
    },
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    }
  }
}
</script>

<style>
.player-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.control-panel {
  padding: 10px;
  display: flex;
  justify-content: space-around;
}

.error-message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>