开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：整合阿里云播放器播放（2）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11483
整合阿里云播放器播放（2）
内容介绍：
一、修改视频
二、播放相关组件
三、创建播放页面创建
四、加入播放组件
一、修改视频
点击课程，进入第一个课程的详情页面，点开小节中的视频
页面出错
代码修改：
<a :href=" " /playerv "+video.videoSourceId">
重新操作后显示还有一个错误
检查代码:
<a :href="" /player/ "+video.videoSourceId" >
<span class="fr">
<i class="free-icon vam mr10">免费试听</i>
</ span>
<em class="lh-menu-i-2 icon16 mr5"> </ em>{{video.title}}
</a>
修改超链接地址:
<a :href="" /player/ " +video.videosirceId" target="_blank">
点击某一个课程，打开小节，打开新的页面，播放视频
代码示例：
mounted( { //页面渲染之后
new Aliplayer({
id: ' 3_prismPlayer",vid: this.vid,//视频id
playauth: this.playAuth，//播放凭证
encryptType: '1'，如果播放加密视频，则需设置
encryptType=1，非加密视频无需 width: '100%',
height: "500px“}
function(player) {
console. log('播放器创建成功')
二、播放相关组件
集成文档:
https://help.aliyun.com/document_detail/51991.html?spm=a2c4g.11186623.2.3
在线配置:
https:/lplayer.alicdn.com/aliplayerlsettinglsetting.html
功能展示:
https://player.alicdn.com/aliplayerlpresentationindex.html
三、创建播放页面创建
pages/playerl_vid.vue
( 1)引入播放器 js 库和 css 样式
<template>
<div>
<! --阿里云视频播放器样式-->
<link vel "stylesheet"href= "https : //g.alicdn.cm/de/prismplayer/2.8.1/skins /default/aliplayer-min.css”,
<! --阿里云视频播放器脚本--><scriptcharset"utf8"type="text/javascript"src="https://g.alicdn.cam/de/prismplayer/2.8.1/aliplayer-min.js”/>
<!--定义播放器dom -->
<div id="._prismPlayer" class="prism-player” >
</div>
< /template>
(2)其他常见的可选配置
//以下可选设置
cover: "http:/ /guli.shop/photo/banner /1525939573202.jpg"，//封面
qualitySort: "asc",//清晰度排序
mediaType: "video',//返回音频还是视频
autoplay: false,//自动播放
isLive: false,//直播
rePlay: false,//循环播放
preload: true,
controlBarvisibility: "hover" ,//控制条的显示方式:鼠标悬停
useHSPrism: true,//播放器类型:html5
四、加入播放组件
功能展示:
https://player.alicdn.com/aliplayer/oresentation/index.html
相应的功能的代码可以通过 copy 复制。
