移动端 HTML5 video 视频播放实践

移动端 HTML5 使用原生 <video> 标签播放视频,目前正被广泛的使用,虽然在各个平台上存在各种各样的兼容问题,给开发者带来不小的障碍,不过根据前人的经验,我们还是能从中找到蛛丝马迹来解决在开发中遇到的问题。 此篇文章,主要是总结我在项目中遇到的一些坑,也为后面的小伙伴在使用 video 标签时,提供一些思路和方法。 在移动端售后项目中,我主要遇到两个问题: iOS WebView 中异步添加 video 标签无法播放。 iPhone6s iOS WebView 中异步添加 video 标签需要点击两次才能播放。 一、项目背景 提升网购用户体验,还是要聚焦在售后服务的环节上。所以此次售后体验的飞跃项目(从京东 app -我的-退换/售后进入)对 H5 页面进行了重构,对业务功能进行了升级。     其中一个升级模块就是在申请售后环节,在之前仅有拍照基础上,增加了音频和小视频的功能,借此机会为用户提供更丰富的多媒体反馈功能。技术上采用的是 H5 + JDReact 结合的模式。用户在点击录视频 icon 会触发调用React原生应用录制小视频,后端同学采用轮询方式往 H5 页面动态添加 video 标签。之后用户可以马上点击刚刚录制的小视频播放观看。算是在申请时候为用户增加的一个更为直观反馈的功能,也便于京东客服的处理。 二、了解 video 标签一些基本的属性 既然决定用 video 标签实现视频回显播放,那么先了解 video 标签都有哪些重要的属性。 属性名字 描述 src 视频媒体地址 autoplay 自动播放。iOS 蜂窝网络和 safari […]

© 2017 JDC. All Rights Reserved.