uniapp 阿里云点播 视频播放

本文主要是介绍uniapp 阿里云点播 视频播放，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

以下是uniapp 阿里云点播（不加密）

注意：
对于UNI APP端的开发而言，由于上并没有document
不能进行相关的DOM操作，同时有关DOM渲染的第三方库(echart、openlayer等)也无法有效的使用，
因此官方推出了renderjs方案，来解决上述问题。

改造 运行 在app端的代码 是另一篇 传送门

一、原理 官方API 中 根据videoId 以及播放凭证 结合 阿里云播放器 实现 视频加密点播

注意，这是官网关于uniapp 的代码 可以直接进行复制 但无法 直接 编译运行到Web端（H5）以外的平台，仅支持目标平台选择Web端。

二、开始在uniapp 中 接入 阿里云web播放器 SDK 官方文档

代码示例如下：

<template><view class="container"><p>VUE2 Demo</p><div id="url-player-test"></div></view>
</template>
<script>export default {mounted() {// 在适合的生命周期，通过script和link标签引入播放器sdk、cssthis.loadWebPlayerSDK().then(() => {// 如果需要使用自定义组件，打开以下注释// this.loadComponent().then(() => {let player = new Aliplayer({id: "url-player-test",source: "//player.alicdn.com/video/aliyunmedia.mp4",width: "100%",height: "100%",}, function (player) {});player.one('canplay', function () {console.log('canplay', player.tag);player.tag.play();});// }).catch((e) => { console.log("加载组件失败", e) })}).catch((e) => {console.log("加载播放器SDK失败", e);});},data() {return {}},methods: {loadWebPlayerSDK() {return new Promise((resolve, reject) => {const s_tag = document.createElement('script'); // 引入播放器jss_tag.type = 'text/javascript';s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';s_tag.charset = 'utf-8';s_tag.onload = () => {resolve();}document.body.appendChild(s_tag);const l_tag = document.createElement('link'); // 引入播放器cssl_tag.rel = 'stylesheet';l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';document.body.appendChild(l_tag);});},loadComponent() {return new Promise((resolve, reject) => {const s_tag = document.createElement('script');s_tag.type = 'text/javascript';// 需要先下载组件 js 文件，放到项目 /static/ 目录下// 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.jss_tag.src = './static/aliplayercomponents-1.0.9.min.js';s_tag.charset = 'utf-8';s_tag.onload = () => {resolve();}document.body.appendChild(s_tag);});}}}
</script>
<style>.container {padding: 20px;font-size: 14px;height: 800px;}
</style>

这篇关于uniapp 阿里云点播 视频播放的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---