解决video,embed对于iphone7p,iphone5,安卓以及微信开发者工具的兼容问题解决方案

工作以后编写的第一个js,解决的第一个问题

需求:视频全屏显示在设备上,有一个播放键,点击后播放,如下图

解决video,embed对于iphone7p,iphone5,安卓以及微信开发者工具的兼容问题解决方案_第1张图片

设备:iphone7plus,ipad4,iphone5,安卓(小米),微信开发者工具

涉及标签:video,embed

视频格式:mp4

问题:使用video标签,在iphone5空白页面。其他设备正常,如下图

 

解决video,embed对于iphone7p,iphone5,安卓以及微信开发者工具的兼容问题解决方案_第2张图片

 使用embed标签在安卓手机上出现控制条(尽管已经隐藏默认控制条),iphone5及其他设备正常,如下图

解决video,embed对于iphone7p,iphone5,安卓以及微信开发者工具的兼容问题解决方案_第3张图片

解决方案:

第一种方式:通过设置两个标签,用js判断当前设备,显示与隐藏标签

很简单的代码,虽然上学也写过js,但是这是我第一次在项目中写下自己的js,必须展示

解决video,embed对于iphone7p,iphone5,安卓以及微信开发者工具的兼容问题解决方案_第4张图片

html样式

解决video,embed对于iphone7p,iphone5,安卓以及微信开发者工具的兼容问题解决方案_第5张图片

第二种方式:通过js判断当前设备,由js编写标签(略)

 

 

你可能感兴趣的:(解决video,embed对于iphone7p,iphone5,安卓以及微信开发者工具的兼容问题解决方案)