视频裁剪
<p>[TOC]</p>
<h4>安装</h4>
<p>七巧板基于 VUE （2.5）， Webpack (3.0) 请确保已具备较新的 node 环境。</p>
<h4>视频裁剪组件基础使用</h4>
<p>当前支持视频添加事件点，对视频进行裁剪、确认裁剪前预览及发布功能。可以将视频刻度轴刻度放大或缩小显示。</p>
<pre><code class="language-javascript"><template>
<video-Tailoring-Component
ref="videoTailoringComponent"
:roomInfo="roomInfo"
:isAdd="isAdd"
@getVod="getVod"
@createVideo="createVideo"
@selectVideo="selectVideo"
>
</video-Tailoring-Component>
<script>
export default {
data () {
return {
roomInfo: {
app_id: 'xxxxxx', // 应用 ID
third_party_user_id: 1234, // 当前房间用户id
paas_access_token: 'access:XXXX', // pass 身份标识
roomeId: "lss_xxxxx", // 当前活动房间id
record_id: "", // 当前活动回放的id
webinar_id: "", // 当前活动id
roleName: 2, // 角色名称 1主持人2观众3助理4嘉宾(此处回放+文档模式只能是已观众角色初始化)
channel_id: 'ch_xxxxx', // 频道Id
},
isAdd: true // 是否可添加视频裁剪 一般情况下为true，当在某个回放中点击裁剪时设置为false
}
},
methods:{
// isAdd 为false 没有该方法
getVod(param) {
// 获取点播视频
let data = [{
name: '', //回放文件名
duration: '', //回放时长
created_at: '', //回放的生成时间
room_id: '', //房间ID：内部ID
record_id: '', //回放的视频文件ID
channel_id: '', //活动频道ID
webinar_id: '', //回放活动/房间ID
id: '', //点播ID
app_id 活动: '', //APP_ID
account_id: '', //用户ID
paas_access_token: '' //回放的 PAAS_ACCESS_TOKEN
}]
// 将获取的列表，通过该方法传给视频裁剪组件
this.$refs.videoTailoringComponent.bindDataList(data)
},
// isAdd 为false 没有该方法
createVideo(data) {
// 生成的视频
let data = [{
name: '', //回放文件名
duration: '', //回放时长
channel_id: '', //活动频道ID
id: '', //点播ID
}]
// 将生成的视频通过该方法传给视频裁剪组件
this.$refs.videoTailoringComponent.pushDataList(data)
},
// isAdd 为false 没有该方法
selectVideo(id) {
// 选定要裁剪的视频，将选择的视频信息赋值给roomInfo即可，组件根据roomInfo.record_id改变而重新渲染视频及裁剪组件
this.roomInfo.room_id = room_id
this.roomInfo.record_id = vod_id
this.roomInfo.channel_id = channel_id
this.roomInfo.webinar_id = il_id
this.roomInfo.id = id
this.roomInfo.name = name
this.roomInfo.app_id = app_id
this.roomInfo.third_party_user_id = account_id
this.roomInfo.paas_access_token = data.access_token
},
saveVideo (param) {
// 将param作为参数请求保存接口
},
exportVideo (param) {
// 将param作为参数请求导出接口,并将返回的视频信息赋值给roomInfo即可，同选择裁剪视频逻辑
this.roomInfo.room_id = room_id
this.roomInfo.record_id = vod_id
this.roomInfo.channel_id = channel_id
this.roomInfo.webinar_id = il_id
this.roomInfo.id = id
this.roomInfo.name = name
this.roomInfo.app_id = app_id
this.roomInfo.third_party_user_id = account_id
this.roomInfo.paas_access_token = data.access_token
// 信息更新完毕后，调取下面方法将导出裁剪视频弹窗关闭
this.$refs.videoTailoringComponent.cancelExportVideoFun()
}
}
}
</script>
</template></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">roomInfo</td>
<td style="text-align: left;">活动信息</td>
<td style="text-align: left;">Object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">isAdd</td>
<td style="text-align: left;">是否可添加视频裁剪</td>
<td style="text-align: left;">Object</td>
<td style="text-align: left;">true、false 当在某个回放中点击裁剪时设置为 false</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>方法</h4>
<ul>
<li>
<p>bindDataList(data)
参数：
data 视频列表数据
说明：用于下拉选择需要裁减的视频</p>
</li>
<li>bindDataList(data)
参数：
data 视频列表数据
说明：用于下拉选择需要裁减的视频</li>
</ul>
<h4>视频裁剪组件 v1.1 版本升级，优化 class名称</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">原CLass</th>
<th style="text-align: left;">修改后CLass</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">vh-video-tailoring-warp</td>
<td style="text-align: left;">vh-video-tailoring__warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-section</td>
<td style="text-align: left;">vh-video-tailoring__section</td>
</tr>
<tr>
<td style="text-align: left;">vh-head</td>
<td style="text-align: left;">vh-video-tailoring__head</td>
</tr>
<tr>
<td style="text-align: left;">vh-add-btn</td>
<td style="text-align: left;">vh-video-tailoring__add-btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-title</td>
<td style="text-align: left;">vh-video-tailoring__title</td>
</tr>
<tr>
<td style="text-align: left;">vh-qp-btn</td>
<td style="text-align: left;">vh-video-tailoring__qp-btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-qxqp-btn</td>
<td style="text-align: left;">vh-video-tailoring__qxqp-btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-save-btn</td>
<td style="text-align: left;">vh-video-tailoring__save-btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-export-btn</td>
<td style="text-align: left;">vh-video-tailoring__export-btn</td>
</tr>
<tr>
<td style="text-align: left;">vh-media-wrap</td>
<td style="text-align: left;">vh-video-tailoring__media-wrap</td>
</tr>
<tr>
<td style="text-align: left;">vh-play</td>
<td style="text-align: left;">vh-video-tailoring__play</td>
</tr>
<tr>
<td style="text-align: left;">vh-doc-warp</td>
<td style="text-align: left;">vh-video-tailoring__doc-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-tailoring-wrap</td>
<td style="text-align: left;">vh-video-tailoring__tailoring-wrap</td>
</tr>
<tr>
<td style="text-align: left;">vh-addvideo</td>
<td style="text-align: left;">vh-video-tailoring__addvideo</td>
</tr>
<tr>
<td style="text-align: left;">vh-select</td>
<td style="text-align: left;">vh-video-tailoring__select</td>
</tr>
<tr>
<td style="text-align: left;">vh-creatvideo-input</td>
<td style="text-align: left;">vh-video-tailoring__creatvideo-input</td>
</tr>
<tr>
<td style="text-align: left;">vh-find-video</td>
<td style="text-align: left;">vh-video-tailoring__find-video</td>
</tr>
<tr>
<td style="text-align: left;">vh-data</td>
<td style="text-align: left;">vh-video-tailoring__data</td>
</tr>
<tr>
<td style="text-align: left;">vh-webinar-info</td>
<td style="text-align: left;">vh-video-tailoring__webinar-info</td>
</tr>
<tr>
<td style="text-align: left;">vh-time</td>
<td style="text-align: left;">vh-video-tailoring__time</td>
</tr>
<tr>
<td style="text-align: left;">vhall-export</td>
<td style="text-align: left;">vh-video-tailoring__export</td>
</tr>
<tr>
<td style="text-align: left;">vh-form</td>
<td style="text-align: left;">vh-video-tailoring__form</td>
</tr>
<tr>
<td style="text-align: left;">vh-label</td>
<td style="text-align: left;">vh-video-tailoring__label</td>
</tr>
<tr>
<td style="text-align: left;">vh-input-form</td>
<td style="text-align: left;">vh-video-tailoring__input-form</td>
</tr>
<tr>
<td style="text-align: left;">vh-content</td>
<td style="text-align: left;">vh-video-tailoring__content</td>
</tr>
<tr>
<td style="text-align: left;">vh-btn-group</td>
<td style="text-align: left;">vh-video-tailoring__btn-group</td>
</tr>
<tr>
<td style="text-align: left;">vh-control-event-point</td>
<td style="text-align: left;">vh-video-tailoring__control-event-point</td>
</tr>
<tr>
<td style="text-align: left;">vh-event-content</td>
<td style="text-align: left;">vh-video-tailoring__event-content</td>
</tr>
<tr>
<td style="text-align: left;">vh-video-duration-warp</td>
<td style="text-align: left;">vh-video-tailoring__video-duration-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-bg-warp</td>
<td style="text-align: left;">vh-video-tailoring__bg-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-current-time</td>
<td style="text-align: left;">vh-video-tailoring__current-time</td>
</tr>
<tr>
<td style="text-align: left;">vh-tailoring-warp</td>
<td style="text-align: left;">vh-video-tailoring__tailoring-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-control-warp</td>
<td style="text-align: left;">vh-video-tailoring__control-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-control</td>
<td style="text-align: left;">vh-video-tailoring__control</td>
</tr>
<tr>
<td style="text-align: left;">volume-box</td>
<td style="text-align: left;">vh-video-tailoring__volume-box</td>
</tr>
<tr>
<td style="text-align: left;">icon-voice-warp</td>
<td style="text-align: left;">vh-video-tailoring__icon-voice-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-slider</td>
<td style="text-align: left;">vh-video-tailoring__slider</td>
</tr>
<tr>
<td style="text-align: left;">vh-hover-time</td>
<td style="text-align: left;">vh-video-tailoring__hover-time</td>
</tr>
<tr>
<td style="text-align: left;">vh-button-operation-warp</td>
<td style="text-align: left;">vh-video-tailoring__button-operation-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-add-event</td>
<td style="text-align: left;">vh-video-tailoring__add-event</td>
</tr>
<tr>
<td style="text-align: left;">vh-cut-video-event</td>
<td style="text-align: left;">vh-video-tailoring__cut-video-event</td>
</tr>
<tr>
<td style="text-align: left;">vh-del-video-event</td>
<td style="text-align: left;">vh-video-tailoring__del-video-event</td>
</tr>
<tr>
<td style="text-align: left;">vh-seek-back</td>
<td style="text-align: left;">vh-video-tailoring__seek-back</td>
</tr>
<tr>
<td style="text-align: left;">vh-play</td>
<td style="text-align: left;">vh-video-tailoring__play</td>
</tr>
<tr>
<td style="text-align: left;">vh-seek-forward</td>
<td style="text-align: left;">vh-video-tailoring__seek-forward</td>
</tr>
<tr>
<td style="text-align: left;">vh-narrow</td>
<td style="text-align: left;">vh-video-tailoring__narrow</td>
</tr>
<tr>
<td style="text-align: left;">vh-enlarge</td>
<td style="text-align: left;">vh-video-tailoring__enlarge</td>
</tr>
<tr>
<td style="text-align: left;">vh-operation-warp</td>
<td style="text-align: left;">vh-video-tailoring__operation-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-cursor-operation-warp</td>
<td style="text-align: left;">vh-video-tailoring__cursor-operation-warp</td>
</tr>
<tr>
<td style="text-align: left;">v-rulers-warp</td>
<td style="text-align: left;">vh-video-tailoring__rulers-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-silder</td>
<td style="text-align: left;">vh-video-tailoring__slider</td>
</tr>
<tr>
<td style="text-align: left;">vh-silder-ruler</td>
<td style="text-align: left;">vh-video-tailoring__slider-ruler</td>
</tr>
<tr>
<td style="text-align: left;">vh-operation-empty-warp</td>
<td style="text-align: left;">vh-video-tailoring__operation-empty-warp</td>
</tr>
<tr>
<td style="text-align: left;">vhall-popbody</td>
<td style="text-align: left;">vh-video-tailoring__popbody</td>
</tr>
<tr>
<td style="text-align: left;">vhall-delcutpoint-popbody</td>
<td style="text-align: left;">vh-video-tailoring__delcutpoint-popbody</td>
</tr>
<tr>
<td style="text-align: left;">vh-cutting-Warp</td>
<td style="text-align: left;">vh-video-tailoring__cutting-warp</td>
</tr>
<tr>
<td style="text-align: left;">v-left-border</td>
<td style="text-align: left;">vh-video-tailoring__left-border</td>
</tr>
<tr>
<td style="text-align: left;">vh-pull-left-warp</td>
<td style="text-align: left;">vh-video-tailoring__pull-left-warp</td>
</tr>
<tr>
<td style="text-align: left;">v-content</td>
<td style="text-align: left;">vh-video-tailoring__content</td>
</tr>
<tr>
<td style="text-align: left;">v-right-border</td>
<td style="text-align: left;">vh-video-tailoring__right-border</td>
</tr>
<tr>
<td style="text-align: left;">vh-pull-right-warp</td>
<td style="text-align: left;">vh-video-tailoring__pull-right-warp</td>
</tr>
<tr>
<td style="text-align: left;">vh-cutting-point</td>
<td style="text-align: left;">vh-video-tailoring__cutting-point</td>
</tr>
<tr>
<td style="text-align: left;">vh-point</td>
<td style="text-align: left;">vh-video-tailoring__point</td>
</tr>
<tr>
<td style="text-align: left;">vh-effective-zone</td>
<td style="text-align: left;">vh-video-tailoring__effective-zone</td>
</tr>
<tr>
<td style="text-align: left;">vh-event-point</td>
<td style="text-align: left;">vh-video-tailoring__event-point</td>
</tr>
<tr>
<td style="text-align: left;">vh-pointer</td>
<td style="text-align: left;">vh-video-tailoring__pointer</td>
</tr>
<tr>
<td style="text-align: left;">vh-mouse-time</td>
<td style="text-align: left;">vh-video-tailoring__mouse-time</td>
</tr>
<tr>
<td style="text-align: left;">vh-ruler</td>
<td style="text-align: left;">vh-video-tailoring__ruler</td>
</tr>
<tr>
<td style="text-align: left;">vh-scale-tip</td>
<td style="text-align: left;">vh-video-tailoring__scale-tip</td>
</tr>
</tbody>
</table>