摘要：个人网站最近刚写了一个手机在线播放的电影站缘由公司项目使用开发混合式，用到了官方提供的原生音频播放模块来做单点音频播放功能。首页和播放页始终进行暂停事件监听。
关于作者
程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是永不停息的追求。
个人网站：https://www.linganmin.cn
最近刚写了一个手机在线播放的H5电影站：http://www.ifilm.ltd
缘由：公司项目使用APIcloud开发混合式app，用到了APIcloud官方提供的audio原生音频播放模块来做单点音频播放功能。单点的意思是所有播放状态交由首页处理，播放页面更改对应播放的item状态即可。因个人感觉凌乱，在老大指引下使用事件和事件监听完成之，遂总结记录之。
附上完成后的效果图:
备注：因需要改变播放页的状态，在播放页的监听器中需要传递当前页面的数据，并在监听器中进行遍历，判断，修改。不然无法完成修改当前播放状态操作。
给当前页面展示的post和相关post使用Vue增加播放所需的状态，进度等属性
点击播放，判断当前post是否正在播放，若是则执行暂停事件，若不是则执行播放事件
首页（index.html）始终进行播放事件监听。
当捕获到播放事件，开始判断当前将要播放的和当前播放的是不是同一个post，如果不是则将执行停止播放事件去停掉当前正在播放的post，然后开始播放将要播放的post。
播放语音的回调函数中执行设置播放状态事件，并将播放过程获取到的音频长度。当前播放位置等参数传递给该事件，供该事件监听器使用。
首页和播放页始终进行暂停事件监听 。【两个监听器】
当首页捕获到暂停事件，则进行音频暂停操作(audio.pause);
当播放页捕获到暂停事件，则将当前正在播放的post的状态改为暂停
首页和播放页始终进行停止播放事件监听。【两个监听器】
当首页捕获到停止播放事件，则进行音频停止播放操作(audio.stop);
当播放页捕获到停止播放事件，则将当前正在播放的post状态改为未播放，播放进度等置空
播放页始终进行设置播放状态事件监听。
当播放页捕获到设置播放状态事件，则获取事件传递的数据，实时改变播放页面的状态
设置播放进度（通过拖动播放进度条）事件由当前播放页触发，出发后将progress的值传递到首页的设置播放进度监听器使用，通过该值设置播放位置
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83682.html
摘要：本文出自官方论坛封装了视频播放功能支持音频播放。本模块封装了两套播放方案一，通过调用接口，直接打开一个自带默认播放界面的播放器二，通过接口，打开一个纯播放器界面，再配合自定义完整的播放页面，通过等接口控制播放操作。 本文出自APICloud官方论坛 vPlayer iOS封装了AVPlayer视频播放功能（支持音频播放）。iOS 平台上支持的视频文件格式有：WMV，AVI，MKV，RM...
摘要：模块化总结最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。模块化的优点可维护性根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立对其进行改进和维护。 模块化总结 最近重新复习的模块化的相关知识，总结一下，仅供自己理解和大家参考。 模块化的优点 可维护性：根据定义，每个模块都是独立的。良好设计的模块会尽量与外部的代码撇清关系，以便于独立...
阅读 2641·2023-04-25 18:10
阅读 1552·2019-08-30 15:53
阅读 2713·2019-08-30 13:10
阅读 3178·2019-08-29 18:40
阅读 1093·2019-08-23 18:31
阅读 1175·2019-08-23 16:49
阅读 3373·2019-08-23 16:07
阅读 853·2019-08-23 15:27
