前端使用Aliplayer播放视频

最新推荐文章于 2023-11-28 15:17:54 发布
VIP文章 最新推荐文章于 2023-11-28 15:17:54 发布
阅读量525 收藏
点赞数 1
分类专栏： 前端 文章标签： js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cp_123321/article/details/105078413
版权 
<!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=1, minimum-scale=1, user-scalable=no" />

    <title>Aliplayer</title>

    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />

    <script type="text/javascript" charset="utf-8"

        src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>

</head>



<body>

    <div class="prism-player" id="player-con"></div>

    <script>

        var player = new Aliplayer({

            "id": "pl
最低0.47元/天 解锁文章
cp_123321
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于前端无法播放RTSP视频流的实现方案
03-08
关于前端无法播放RTSP视频流的实现方案
视频播放和文档展示 前端
最新发布
12-20
视频和文档播放
前端播放器（阿里云视频播放）
04-15
前端播放器（阿里云视频播放）
点播播放器和直播播放器冲突如何解决?
qq_35267530的博客
09-25 1077
1.问题 开发者有点播和直播都需要用，既有播放网络视频的需求也有直播播放视频流的需求，这个时候如果用户先集成了点播播放器再去集成直播播放器的时候会出现冲突报错. 2.解决方案 开发者仅仅使用直播播放器.如果有播放器视频的需求用户可以通过点播服务的openApi来获取视频Url来播放视频. 3.原因? 直播播放器：解决最原始的播放需求，可以播放视频Url,可
VUE2中使用阿里云播放器AliPlayer
JaneYork的博客
11-28 794
基于 Vue 的播放器单页应用, 利用 web 播放器 sdk 进行视频点播，包含播放列表、字幕、多语言、自适应码率，皮肤自定义等功能 Web播放器文档。解决思路：直接iframe等方式内嵌HTML写法的播放器即可。
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
阿里云视频播放器
热门推荐
nano-11的专栏
10-29 1万+
阿里云 录播 集成文档：https://help.aliyun.com/document_detail/51991.html 阿里云 录播 在线测试：https://player.alicdn.com/aliplayer/setting/setting.html?spm=a2c4g.11186623.2.16.46b46782BOP3P6 阿里云在线 诊断：http://player.alicdn.com/detection.html?from=h5&vid=&source=https%3A
Aliplayer 播放器的使用（支持直播，点播、录播，视频播放等功能）
LarrySun
12-28 1万+
最近公司需要写一个简单的直播H5，作为前端播放器第一选择当然是video.js了。可是样式是在无法忍受，而且有些交互也不太友好。无奈继续寻找更加合适的播放器，阿里的Aliplayer便是一个不错的选择 ，简单记录下使用方法，备忘。（所有环境都在vue基础上搭建的） 一、引入对应的文件，在index.html中引入如下： <script src="https://g.alicdn...
前端使用Aliplayer 播放器 播放rtmp直播流
简析的博客
07-01 5298
本次项目使用Aliplayer 播放器 播放rtmp直播流（户外摄像头的直播流），视频监控是用的阿里云的视频监控。 前端框架：layui 需求： 1、使用阿里播放器插件Aliplayer，实现rtmp流的直播播放； 2、实现PTZ云台控制。 3、调用PTZ云台控制接口的时候，公共参数中的签名结果串，是经过计算获得的，签名方式HMAC-SHA1。 相关文档： 播放器的属性接口说明文档 https://help.aliyun.com/document_detail/125572.htm...
关于Vue阿里云播放视频
qq_16495187的博客
05-21 1413
首先,新建一个组件，名字随便取 我取的是VueAliplayer.vue 最后在别的组件引入这个组件就行,需要记住下面几个问题 1.播放栏的一些按钮是下面的代码（比如暂停,全屏） skinLayout: { type: Array, default: function () { return [ { name: "bigPlayButton", align: "blabs", x: 30, y: 80 }, {
7个Web前端极其精美的播放器组件源码（一）
08-05
7个Web前端极其精美的播放器组件源码（一）
rtmp视频流播放-前端
02-19
rtmp视频流播放-前端直播技术，video.js播放视频流源文件，下载可用
前端开发-js-视频播放时长实时记录
04-10
自己写的一个用于记录视频播放时长的js，通过video标签的事件处理实现，文末有使用示例，引入即用。
React+阿里云Aliplayer播放器实现rtmp直播（推流时间差，重启播放器，计时观看）
Cvory
03-26 2319
需求 前端框架为React 用阿里云播放器Aliplayer播放直播 使用的rtmp协议 资料 阿里云播放器 Web端文档：https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1177.11de7ff0vHMWJy 阿里云Aliplayer播放器在线配置页：https://player.alicdn.com/aliplayer/setting/setting.html 业务流程 先发请求拿到直播地址，以及设备号等
阿里云视频播放器(带websocket弹幕) - 前端h5
s1095622320的博客
03-03 4417
阿里云文档地址:集成文档 - 视频点播 - 阿里云https://help.aliyun.com/document_detail/125570.html 实现弹幕思想: 获取视频当前播放时间 , 发送给后端 , 使用定时器+ws获取视频一分钟内所有弹幕,每秒钟获取当前视频时间 , 视频时间等于弹幕的发送时间滚动出来, 当暂停视频时清除所有定时器,点击播放时如果开启弹幕再重复之前获取的操作 <!DOCTYPE html> <!-- <html lang="en">...
h5阿里云播放器 常规使用
maxiaole_z的博客
05-14 2120
阿里云播放器： 引入js和css <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.
使用vue二次开发海康监控H5视频播放
Kepler_明的博客
06-09 6700
使用vue二次开发海康监控H5视频播放西瓜播放器示例demo阿里云的示例demo使用海康的H5视频开发包，海康的api页面中的使用第一步第二步第三步第四步切记bug 由于公司项目需要做监控的直播跟回放，所以接触到了这个海康的监控视频播放，本来是打算使用videojs使用rtmp流进行监控的直播，因为现在主流浏览器都不支持flash插件，而videojs使用rtmp流直播的话需要浏览器支持flash，所以果断放弃，后来决定使用hls协议调用H5播放器进行播放。然后当时找了两个H5播放器一个是西瓜播放器，另一个
vue中使用Alipayer,播放rtmp,m3u8,mp4视频, vue-alipayer-v2.
狼丶宇先森的网络科技空间
11-14 6594
这是一个基于Alipayer 开发并封装于vue的播放器 由于项目需要接入rtmp协议的直播流,用于实时监控,看了网上的几个开源播放器,最后选择了阿里云的开源播放器,Alipayer,但是Alipayer是cdn加载的,且没得一个正式的vue版本,最后还是选择了自己手写吧.废话不多说,直接上代码,如下: 项目地址:https://github.com/langyuxiansheng/vue-...
使用swiper轮播显示多张图片
cp_123321的博客
04-08 7458
效果如下: css样式, 需要引入swiper的css和js文件 <linkrel="stylesheet"href="./static/swiper/css/swiper.min.css"> <scriptsrc="./static/swiper/js/swiper.min.js"></script> .ying_sipder .s...
前端播放视频的标签使用例子
06-12
好的，这里是一个前端播放视频的标签使用例子： ``` <video src="video.mp4" controls></video> ``` 在上面的例子中，我们使用了`<video>`标签来播放名为"video.mp4"的视频文件，并且添加了`controls`属性来显示播放器控制条。您可以将视频文件的URL替换成您自己的视频文件URL，这样就可以在网页中播放您自己的视频了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值