Vue3 在＜script setup＞语法糖中引入并应用aliplayer并实现视频播放功能

@正在学习驰骋的小马

于 2024-03-31 16:28:43 发布

阅读量929

点赞数 5

文章标签：音视频 vue 阿里云

本文链接：https://blog.youkuaiyun.com/qq_43646281/article/details/137202436

版权

本文介绍了如何在Vue3项目中使用aliplayer官方提供的WebPlayerSDK，并展示了如何在模板中嵌入代码以实现实时视频播放功能。开发者需先加载SDK和CSS，然后在onMounted钩子函数中初始化播放器并处理播放事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue3中使用aliplayer并实现视频播放功能

在aliyun官网上有Demo源码: Vod
作者进行修改后如下：
创建一个.Vue页面放入以下 代码.

<template>
<view class="container">
    <p>VUE2 Demo</p>
    <div id="url-player-test"></div>
</view>
</template>
<script setup lang="ts">
import {
    reactive } from 'vue';
import {
    onMounted } from 'vue';


const loadWebPlayerSDK=async () =>{
   
        return new</