zoukankan      html  css  js  c++  java
  • 原生audio 实现音频播放器功能

    一 背景:项目为了引导授信、增加曝光度,在详情页添加了XX学院这一模块,为了引导用户购买我们单独专业的课程

    二 实现效果: 初期预计的实现效果是用音频播放我们的课程,暂定的一期只有音频资源

    三 现状:目前项目的视频播放组件用的是百度熊掌号下的资源和插件,并且没有音频相关的资源。所以问题就是需要开发新的可以播放音频的音频播放器。

    四 问题

      1.  currentTime 无法设置,这里遇到了一个这样的问题,每当点击进度条做跳转的时候,需要重新设置音频的播放进度,这里就涉及到重置audio的currentTime
        然而每次点击的话,currentTime都会被重置为0,怪异的是在谷歌浏览器中是有问题的,火狐、ios的safari都是没有问题,最开始以为是兼容的问题,更改了代码
        最后发现是谷歌浏览器对于流媒体
      2. 原生样式覆盖 firefox不能设置
      3. 跳帧实现
      4. 更新进度条实现
      5. 转换时间
      6. 结束时间的状态
      7. 监听进度条改变、监听结束
      8. 遇到的数据源的问题 也就是duration 不准确 不能被压缩
      9. 拖动播放问题
      10. 进度问题 切换了定时器也是无效 最后发现 和自己写的js精度有关 使用了Math.round + Math.floor 计算进度百度比 但是发现使用后,进度条更新慢,去掉后更新快
        个人猜测,计算精度需要一定的时间,所以定时器太快 但是精度运算的结果太慢,导致进度条更新也很慢
      11. loadedmetadata  的兼容问题 在火狐和chrome上一个执行一个不执行

      12. mp4 格式在ios 无法播放 原因:初步断定是压缩格式导致的,因为换一个url就可以了

    吾生有涯 而知也无涯矣
  • 相关阅读:
    好的Qt学习资料
    QT QMap介绍与使用
    Qt缺少调试器
    vs2012+Qt5.3.1环境添加新的ui界面的方法
    QT定时器的使用
    Qt中forward declaration of struct Ui::xxx的解决
    linux-svn命令
    如何编写Windows服务
    为你的爬虫提提速?
    Python爬虫的N种姿势
  • 原文地址:https://www.cnblogs.com/Sherlock09/p/11511752.html
Copyright © 2011-2022 走看看