Element-UI实现对话框内播放视频

1.问题

效果: 实现一个点击播放列表中的一个视频标题, 然后弹出一个对话框进行视频播放, 可点击全屏进入全屏播放.
环境: Nuxt.js 、Vue.js、Element-UI、阿里云播放器Aliplayer.

2. 解决步骤

第1步: 在你要进行播放视频的页面引入阿里云播放器Aliplayer资源文件.
我的播放页面是_id.vue

这个引入最好放在较外层的标签里, 要在创建播放器之前就引入, 毕竟这是一个网络资源, 加载需要时间, 否则偶尔会因为创建播放器时找不到资源而报错.

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

第2步: 创建一个播放器组件player, 放在Nuxt.js的components文件夹中.
其实也可以不创建组件, 直接在进行播放视频的页面编写, 我这样做是为了方便管理

<template><!--播放器--><div class="prism-player" id="J_prismPlayer" style="margin-left: auto; margin-right: auto;"></div>
</template>
<script>export default {props:{//组件需要的参数video: Object},data() {return {}},created() {//console.log("组件成功")},mounted(){this.initPlayer()},methods: {initPlayer(){//console.log(this.video)new Aliplayer({id: 'J_prismPlayer',vid: this.video.vid, // 视频idplayauth: this.video.playauth, // 播放凭证encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项width: '800px',height: '450px',//cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面qualitySort: 'asc', // 清晰度排序mediaType: 'video', // 返回音频还是视频autoplay: true, // 自动播放isLive: false, // 直播rePlay: false, // 循环播preload: true,controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停useH5Prism: true, // 播放器类型：html5}, function(player) {console.log('播放器创建成功')})}}}
</script>

第3步: 在你要进行播放视频的页面的对话框中添置播放器组件player.

    <el-dialog :visible.sync="dialogVisible":close-on-click-modal="false":destroy-on-close="true"@close="playerVisible=false"style="text-align: center; width: 1700px;"><player :video="video" v-if="playerVisible"></player></el-dialog><div><link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css" /><script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js"></script></div>

注意看, 第一步说的资源引入代码块我是放在了对话框标签的外面, 也就是要在播放器创建之前就先加载资源.然后还用v-if=“playerVisible” 控制播放器的创建时机, 我这是为了控制当对话框渲染完成且视频数据获取到后才开始创建播放器, 不这样做的话容易报 播放器找不到容器 和 视频播放需要id 的错.

第4步: 在你要进行播放视频的页面的methods中添加控制相关的函数, 并在对应的点击事件中调用.

 playVideo(row){//console.log(row)this.dialogVisible=truethis.video={}courseApi.getPlayAuth(row.vid).then(response=>{this.video.vid=row.vidthis.video.playauth=response.data.data.res.playAuththis.playerVisible=true}).catch(error=>{})},

注意: 我这里是在点击table表格中的一行触发打开弹窗, 这里需根据自己的页面实际情况进行编写

3. 效果展示

点击播放列表中的一行
弹出对话框进行视频播放
点击全屏

Element-UI实现对话框内播放视频相关推荐

Element UI Dialog 对话框改成固定高度，超出部分滚动条滚动
问题描述 elememt ui 中的el-dialog对话框如果内容过多高度会被无限拉长.要将其设置成固定高度,此处我设置的是页面总高度的80%,内容过多时在对话框内出现滚动条.但是这样设置会造成高度 ...
Element Ui 关闭对话框清空验证消息，清除form表单的操作
方法1 首先在对话框取消按钮添加 click事件,例如:(ps:callOf 里面的addGroupData和ref - - ) <div slot="footer" c ...
全志D1-H 双屏异显第一弹来啦 D1同时支持两个屏幕，一边做UI交互，一边播放视频
1文档中有功能:双屏同显!具体操作见文档:https://d1.docs.aw-ol.com/source/3_getimg/ 双屏同显测试固件:https://www.aw-ol.com/downl ...
element ui dialog 对话框设置fullscreen_UI设计中的弹窗设计素材，技巧快get起来
弹窗弹窗是指打开网页.软件.手机APP等的时候自动弹出的窗口.(百度百科) 弹窗作用 (1)中断用户当前操作,对其作出补充 (2)中断用户当前操作,对其作出反馈弹窗类型 (1)模态弹窗 (2)非模 ...
Element ui Dialog 对话框遮罩层挡住对话框问题
1.当遮罩层挡住对话框需要点击很多下才能使对话框高亮这里不可能让客户点击这么多下的,肯定是代码出现了问题,原来的代码: el-dialog 哪怕添加append-to-body=true 也是会出现 ...
iphone html5直播,【小技巧】解决iPhone中video视频的行内播放
如果我们希望在一个内播放视频,我们可能会这么写: // CSS: video {width: 100%; height: auto;} // HTML: 这在Android系统的手机中可以完美实现 ...
element ui 对话框改模仿苹果手机预览视图
修改了一下 element ui的对话框做一个手机模拟预览的样式 <div class="look_box"><el-dial ...
element ui table组件异步加载数据盒子位移
使用element ui 中的 table组件时 ,异步加载数据,然后渲染上去时会出现td与th对不齐,但是重新重新进一次就有又好了,但是对于用户体验肯定是不行的. 这个时候只需要使用element ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...

Element-UI实现对话框内播放视频

1.问题

2. 解决步骤

3. 效果展示

Element-UI实现对话框内播放视频相关推荐

最新文章

热门文章