能力一般水平有限,自己真的不是做前端的料啊,奈何两手抓,两手都要硬啊。求各位大神路过的时候指点一下,感激不尽。
需求就是,多路视频同步播放,需要实现一键播放、暂停、快播(当然不是那个快播)、慢播,同时还需要统一的外部进度条控制。因为实在不知道标准的解决方案是什么,项目需求也比较急,所以只能自己大概先写一个能够满足基本需求的,后续再修改。
上代码,vue + element-ui
<template>
<div class="app-container">
<div class="data-container">
<div style="clear:both;text-align:center" :hidden=videoHidden class="videoPlay">
<div style="display:inline" v-for="videoObj in videoList"
:key="videoObj.sequence"
:label="videoObj.sequence"
:value="videoObj.url">
<video controls="controls" :width=width :id=videoObj.sequence preload="auto" :src=videoObj.url>
</video>
</div>
<div class="controls">
<el-select v-model=playSpeed value-key="id" placeholder="播放速度" clearable filterable style="width:120px">
<el-option
v-for="item in playSpeedList"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-caret-right" @click="start()">{
{'播放'}}</el-button>
<el-button type="primary" @click="pause()">{
{'暂停'}}</el-button>
<el-time-picker
v-model="time"
:picker-options="{selectableRange: '00:00:00 - 02:59:59'}"
style="width:120px"
arrow-control
value-format="HH:mm:ss"
:editable=true
placeholder="请选择">
</el-time-picker>
<el-button type="primary" @click="seek_to()">{
{'跳转'}}</el-button>
</div