视频播放器

简单的视频播放器

# 视频播放

// frontend/src/views/effect/video/Index.vue
<script>
import Player from 'xgplayer'
import { ipcApiRoute } from '@/api/main'
export default {
  data() {
    return {
      fileUrl: '',
      p: {},
      op: {
        id: 'video-player',
        volume: 0.3,
        url:'//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
        poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        playsinline: false,
        danmu: {
          comments: [
            {
              duration: 15000,
              id: '1',
              start: 3000,
              txt: '这是一个弹幕',
              style: {  //弹幕自定义样式
                color: '#ff9500',
                fontSize: '20px',
                border: 'solid 1px #ff9500',
                borderRadius: '50px',
                padding: '5px 11px',
                backgroundColor: 'rgba(255, 255, 255, 0.1)'
              }
            }
          ],
          area: {
            start: 0,
            end: 1
          }
        },
      },
    };
  },
  mounted () {
    this.init();
  },    
  methods: {
    init () {
      this.p = new Player(this.op);
    },    
    selectFile () {
      const params = {}
      this.$ipc.invoke(ipcApiRoute.selectFile, params).then(res => {
        if (res) {
          this.fileUrl = res;
          this.p.start(self.fileUrl);
        } else {
          this.$message.warning('请选择视频');
        }
      }) 
    },
  }
};
</script>

// Make sure to add code blocks to your code group

# 完整代码

上次更新: 2025/04/10, 03:07:49

← 系统主题打印机→