使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流

一、使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流

官方教程：https://help.aliyun.com/document_detail/125570.htm?spm=a2c4g.11186623.0.0.4a3b125de04RLI#task-1997027

在 vue 项目中的 index.html 文件中，引入视频资源

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.11.0/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.11.0/aliplayer-h5-min.js"></script>

封装组件 base_video_Flv：

<template><!-- 可播放 hls(.m3u8)、.flv格式的视频直播流 --><div :id="videoId" :style="{ width: videoWidth, height: videoHeight }"></div>
</template><script>
export default {props: {//视频地址、video的id值vData: {type: Object,default: () => {return {hlsurl: "", //视频url地址cameraId: "", //idplayer: null,};},},//视频宽度videoWidth: {type: String,default: "100%",},//视频高度videoHeight: {type: String,default: "100%",},},data() {return {videoId: "",};},methods: {getVideo(url, videoId) {this.player = new Aliplayer({id: videoId,//source:"http://10.182.28.116:8080/live/00000011-0000-0000-0000-0a3b010b401f.flv", //播放地址，可以是第三方直播地址，或阿里云直播服务中的拉流地址。//source:"https://live-hls-web-aje.getaj.net/AJE/index.m3u8",source: url,isLive: true, //是否为直播播放。skinLayout: [], //去除控制栏},function (player) {console.log("The player is created.");});},},mounted() {},watch: {//监听视频地址、video的id值vData: {deep: true,immediate: true,handler(val) {if (val && val.cameraId) {this.videoId = val.cameraId;this.$nextTick(() => {this.getVideo(val.hlsurl, this.videoId);});}},},},beforeDestroy() {//  组件销毁时，清除播放器if (this.player) {this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom}},
};
</script><style lang="scss" scoped>
//隐藏播放按钮
::v-deep .video-js .vjs-big-play-button {display: none;
}
</style>

组件调用：

<template><!-- 接收 hls(.m3u8) 和 .hlv 的视频流 --><!-- 视频页面 --><div style="width: 100%; height: 100%"><BaseVideoFlv :vData="vData"></BaseVideoFlv></div>
</template><script>
import BaseVideoMore from "./base_video_Flv.vue"; export default {name: "IndexVideo",components: {BaseVideoFlv,},data() {return {vData: {hlsurl: "",cameraId: "",},};},methods: {getUrlParam() {// 假数据this.vData = {hlsurl: "http://10.182.28.116:8080/live/00000011-0000-0000-0000-0a3b010b401f.flv",cameraId: "video_id_01",};},},created() {this.getUrlParam();},
};
</script><style lang="scss" scoped>
</style>

二、播放视频

web前端HTML播放HLS在线视频流（m3u8）：
https://blog.csdn.net/Evil_0_0_0/article/details/105768336

使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流相关推荐

阿里云移动端播放器高级功能---直播时移
基本介绍通常都知道直播是无法seek拖动的,那么针对在直播中想回看之前直播过的内容的用户来说,直播时移就能派上用场.我们阿里云播放器支持了直播时移功能,用户能较为方面和快速的使用直播时移的功能. 先 ...
阿里云移动端播放器高级功能---安全播放
基本介绍如何保障视频内容的安全,不被盗链.非法下载和传播,阿里云视频点播已经有一套完善的机制保障视频的安全播放: 那么在播放器中支持哪一些安全播放的机制呢? 这里有料:视频安全解决方案. Refer ...
阿里云点播 web 播放器
浅谈最近遇到很多人使用阿里云点播 web 播放器,通过 STS 令牌的方式去播放 MTS 转码完成后的资源出现问题,"路见不平一声吼,写个过程先献丑",只是做了最基础的功能,看官 ...
react项目中使用阿里播放器播放视频，包括切换视频，播放定时跳转（兼容ios和andro），播放完成
react项目中使用阿里播放器播放视频,包括切换视频,播放定时跳转(兼容ios和andro),播放完成 1.index.html引入阿里播放器的cdn <link rel="style ...
html使用vcastr3.swf播放器播放flv视频
一.特点: 使用as3.0重新写了播放器播放器大小缩小,在20+k左右可以通过xml对播放器设置可以播放多个影片,并且有影片列表可以设置循环播放,自动播放,是否直接开始下载,控制栏的颜色和模式 ...
免费轻量级网页播放器f4player, flv, f4v, mp4, stream, live stream, subscribed CDN
免费轻量级网页播放器f4player, flv, f4v, mp4, stream, live stream, subscribed CDN 博客分类: Javascript /Jquery / Bo ...
H.265视频EasyPlayer播放器点播FLV不断加载，如何处理？
EasyPlayer视频流媒体播放器属于高开放度.高兼容性.高灵活性.可支持H.264/H.265视频编码格式的播放器,为了满足用户的个性化需求,EasyPlayer具备多个版本,如EasyPlaye ...
网页flv播放器JW FLV PLAYER 说明（转）
JW FLV PLAYER 在线FLV播放器中文使用说明 2009年07月02日星期四 10:15 使用方法:如果你仅需要播放一个FLV文件[例如"video.flv"],那么只 ...
阿里云点播获取播放路径
阿里云点播获取播放路径需要的jar包代码 #背景介绍一个项目听说要做视频点播,发现阿里有云播放模块.尝试把视频放在上面,项目只能数据存储和播放.但是怎么获取到云播放视频的地址走了一点弯路记录一下 ...

使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流

一、使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流

二、播放视频

使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流相关推荐

最新文章

热门文章

使用 阿里云 播放器播放 .flv 和 hls(.m3u8) 格式的视频流

一、使用 阿里云 播放器播放 .flv 和 hls(.m3u8) 格式的视频流

二、播放视频

使用 阿里云 播放器播放 .flv 和 hls(.m3u8) 格式的视频流相关推荐

最新文章

热门文章

使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流

一、使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流

使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流相关推荐