Aliplayer简单使用

最新推荐文章于 2025-06-03 18:15:42 发布
最新推荐文章于 2025-06-03 18:15:42 发布
阅读量8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 阿里播放器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013258556/article/details/80137608
博客介绍了如何在网页中集成阿里播放器Aliplayer，包括在HTML中添加div元素及在JavaScript中进行初始化配置，建议查阅官方文档以获取更多详细操作。

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

在页面里添加个div标签；

<div id="video-player"></div>

在JS里：

player = new Aliplayer({
id: 'video-player',
width: '100%',
height: '400px',
autoplay: true,

//支持播放地址播放,此播放优先级最高
source: video_src, //video_src视频地址

});

跟多文档操作可以去看看阿里播放器的文案；

个人记录

阿里播放器Aliplayer封装
迩菜flysun的博客
04-14 9046
这里写自定义目录标题Aliplayer简单封装组件封装 Aliplayer简单封装 最进公司在做直播项目的。用到阿里Aliplayer播放器，一开始看文档不是太明白，我折腾好几天，用别人封装好的Aliplayer，但是不是我的理想型，我这边要实现：试看和记忆播放2， 组件封装 引用官方js 官方文档： https://player.alicdn.com/aliplayer/index.htm...
前端视频插件Aliplayer播放器简单使用（基于地址播放）
热门推荐
weixin_33947521的博客
04-22 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge" > <meta name="viewport" content="width=device-width, h...
【视频直播篇七】Aliplayer的使用
一只没有脚的鸟
03-08 2112
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge" > <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale
h5的aliplayer-min.js 加密视频会走到debugger
最新发布
m0_52611940的博客
06-03 477
h5的aliplayer-min.js 加密视频会走到debugger
阿里播放器的使用Aliplayer
weixin_44953689的博客
11-12 1277
阿里在线配置 <template> <div> <div @contextmenu.prevent class="w"> <div class="video_page"> <div class="vedio_top"> <div class="vedio_tit"> <img @click="goBack"
阿里云Aliplayer视频播放（web播放器）
huhuhuja
08-25 7032
1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV 2.阿里云Web播放器SDK，同时支持Flash和Html5两种播放技术 Flash Html5 3.在index.html中引入： <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/de..
Aliplayer 播放器的使用（支持直播，点播、录播，视频播放等功能）
LarrySun
12-28 1万+
最近公司需要写一个简单的直播H5，作为前端播放器第一选择当然是video.js了。可是样式是在无法忍受，而且有些交互也不太友好。无奈继续寻找更加合适的播放器，阿里的Aliplayer便是一个不错的选择 ，简单记录下使用方法，备忘。（所有环境都在vue基础上搭建的） 一、引入对应的文件，在index.html中引入如下： <script src="https://g.alicdn...
基于aliplayer使用react封装的播放器源码.zip
05-18
【标题】：“基于aliplayer使用react封装的播放器源码.zip” 这个压缩包包含的是一个使用阿里云播放器（AliPlayer）与React.js技术结合，进行前端开发的自定义播放器组件的源代码。阿里云播放器是一款强大的HTML5...
VueAliPlayer一个基于viewaliplayer的Vue2x视频播放器组件
08-10
VueAliPlayer的使用首先需要安装相应的依赖。开发者可以通过npm或者yarn进行安装： ```bash npm install vue-aliplayer # 或者 yarn add vue-aliplayer ``` 安装完成后，在Vue组件中引入并注册VueAliPlayer，然后...
阿里云视频直播 web前端[移动端] Aliplayer的简单案例
qq_39308154的博客
10-31 3566
阿里云视频直播 web前端[移动端] Aliplayer的简单案例 最近做了一个功能就是播放后台提供的各种直播视频，格式在未确定的情况下，刚开始以为简单的一个video标签就能播放视频，后面才发现各种问题，video只是能播放一些常见的音视频格式，video是HTML5的新标，兼容这块就有很多浏览器不支持，主要兼容不是浏览器不支持，更多的是video不支持音视频格式。 video兼容 一共支持三种...
JavaScript之实现一个简单的Vue示例
11-28
vue的使用相信大家都很熟练了，使用起来简单。但是大部分人不知道其内部的原理是怎么样的，今天我们就来一起实现一个简单的vue Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现，因为...
vue-aliplayer-v2:这是一个基于Alipayer开发并封装成vue组件的播放器。可播放rtmp，m3u8，mp4 ....视频。除支持直播流与点播的基础功能外，还支持视频的加密播放，设置切换，直播时移等业务场景等.https
03-08
vue-alipayer-v2 感谢每一位支持开源的朋友。这是一个基于Alipayer开发并封装成vue组件的播放器。 vue中使用Alipayer，播放rtmp，m3u8，mp4视频 假如此轮对您有帮助，请顺手star一下吧.o（ ￣︶￣ ）o 1.安装使用！下载安装npm包 npm i vue-aliplayer-v2 --save or yarn add vue-aliplayer-v2 总体注册main.js import VueAliplayerV2 from 'vue-aliplayer-v2' ; Vue . use ( VueAliplayerV2 ) ; //可选全局配置 //Vue.use(VueAliplayerV2,{ // cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/
H5+Aliplayer 直播插件+弹幕插件
12-10
Demo是H5+Aliplayer方式直播+弹幕插件Index是直播，123页面是加了弹幕。如果真实直播需要OBS推流方式。不过练手还不错的。
使用videojs/aliplayer 实现rtmp流的直播播放
04-21
使用videojs/aliplayer 实现rtmp流的直播播放，解压后放到服务器上，访问即可。浏览器访问要支持flash。压缩包里的图片是如何开启flash的
阿里云视频点播 前端js两个版本
12-28
是自己总结的 前端vue对接阿里云视频点播所需要的js版本 aliyun-oss-sdk-4.3.0.min.js aliyun-oss-sdk4.13.2.min.js aliyun-oss-sdk-5.2.0.min.js aliyun-upload-sdk1.3.1.min.js aliyun-upload-sdk-1.4.0.min.js es6-promise.min.js
uniapp 安卓APP使用AliPlayer
12-29
为了在基于 UniApp 的安卓应用程序中集成并使用阿里云播放器 (AliPlayer)，可以遵循以下指南： #### 准备工作 确保已经注册了阿里云账号，并创建了一个媒体转码实例来获取 `playAuth` 和视频 ID (`vid`)。这些参数...
阿里云视频播放器
qq_43813373的博客
04-14 9035
文章目录视频播放器介绍实战引入脚本文件和 css 文件初始化视频播放器播放地址播放播放凭证播放（推荐）test代码总结： 视频播放器介绍 阿里云的视频播放器类比 HTML5视频播放标签video和音频播放标签audio标签 只是阿里云视频播放器是针对阿里云上传的视频进行配置和操作。 阿里云播放器 SDK （ ApsaraVideo Player SDK）是阿里视频服务的重要一环，除了支持点播和直播的基础播放功能外，深度融合视频云业务，如支持视频的加密播放、安全下载、清晰度切换、直播答题等业务场景，为用户提
【阿里云获取播放地址播放】
Java—wang的博客
08-01 1119
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" /> <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script> &l...
aliplayer播放器使用
长颈鹿的博客
11-17 1万+
aliplayer播放器使用 项目背景：vue-cli3.0， 使用播放地址方式播放 1、aliplayer官网地址：(https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1099.33ee1bc7e0ebmi) 2、使用方式 index.html文件中引入所需文件 <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值