zoukankan      html  css  js  c++  java
  • iviewtable表格数据 录音播放下载

    播放下载:

    {
    title: '通话录音',
    align: 'center',
    key: 'recordUrl',
    render: (h, params) => {
    if (params.row.recordUrl.substr(-3) == 'wav') {
    return h('div', {
    style: {

    }
    }, [
    h('audio', {
    style: {
    textAlign: 'center',
    padding: '4px',
    '100px'
    },
    attrs: {
    src: 'http://ai.foxcall.cn' + params.row.recordUrl,
    id: params.row.id,
    'data-flag': true
    }
    }, params.row.recordUrl),
    h('i', {
    style: {
    'font-style': 'normal',
    'color': '#2d8cf0',
    'cursor': 'pointer'
    },
    on: {
    click: () => {
    this.play(params)
    }
    }
    }, '播放'),
    h('a', {
    'style': {
    margin: '0 4px',
    'color': '#2d8cf0',
    'cursor': 'pointer',
    'margin': '0 2px'
    },
    attrs: {
    href: 'http://ai.foxcall.cn' + params.row.recordUrl
    }
    }, '下载')
    ])
    } else {
    return h('div', [
    h('Tooltip', {
    props: { placement: 'bottom' }
    }, [
    h('span', {
    style: {
    display: 'inline-block',
    params.column._width * 0.9 + 'px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    zIndex: 99
    }
    }, params.row.recordUrl),
    h('span', {
    slot: 'content',
    style: { whiteSpace: 'normal', wordBreak: 'break-all' }
    }, params.row.recordUrl)
    ])
    ])
    }
    }
    },

    播放:

    play (value) {
    let id = value.row.id
    let i = document.getElementById(id).nextElementSibling
    let au = document.getElementById(id)
    let end_time = au.duration
    if (au.dataset.flag == 'true') {
    au.play()
    i.textContent = '暂停'
    i.style.cssText = 'color:red;font-style:normal;cursor:pointer'
    au.dataset.flag = false
    } else {
    au.pause()
    i.textContent = '播放'
    i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
    au.dataset.flag = true
    }
    var count_interval = setInterval(function () {
    if (au.currentTime == end_time) {
    i.textContent = '播放'
    i.style.cssText = 'color:#2d8cf0;font-style:normal;cursor:pointer'
    au.dataset.flag = true
    clearInterval(count_interval)
    }
    }, 1000)
    },
    多多指教,我还是前端小生
  • 相关阅读:
    关于mvc、webapi中get、post、put、delete的参数
    sql2008清空日志
    Entityframework修改某个字段
    order by与索引
    Ninject中如果在抽象类中使用了属性注入,则属性必须设置为protected或public
    ViewData,ViewBag,TempData
    eurake高可用集群搭建 自我保护机制
    zookeeper 保证 CP

    JConsole工具监控java程序内存和JVM
  • 原文地址:https://www.cnblogs.com/yangslin/p/11308022.html
Copyright © 2011-2022 走看看