解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放

在做html5时插入一个视频播放标签video后,测试时android、ipad客户端播放正常,唯独iphone自带浏览器无法播放。

解决办法:

判断用户所使用客户端访问h5页面时是iphone时,点击播放视频触发的是一个视频url链接,而非video标签。

js判断代码如下:此代码引用Github中Stanko/html-canvas-video-player

var isIphone = navigator.userAgent.indexOf(‘iPhone‘) >= 0;
// Other way to detect iOS
// var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

if (isIphone) {
    // Init CanvasVideoPlayer here
    new CanvasVideoPlayer({
        // Options
    });
}
else {
    // Use HTML5 video
}

根据以上的isIphone判断代码即可解决此类问题

eng:(html代码就不再贴出)

$(function(){
        var isIphone = navigator.userAgent.indexOf(‘iPhone‘) >= 0;
        if (isIphone) {
            $(".play_video").click(function(){
                window.location="视频的绝对地址url"
            });
        }
        else {
            $(".play_video").click(function(){

                var videoHtml = "<video id=\"video_span\" class=\"url_video\" src=\"视频的绝对地址url\" x-webkit-airplay=\"true\" webkit-playsinline=\"true\" poster=\"视频封面图片的绝对地址\" preload=\"null\" loop=\"loop\" autoplay  controls=\"controls\"></video>"
                $("#video_div").html(videoHtml)
                $(".section").addClass("masked");
                $(".video").show();

            });
        }
    });
时间: 2024-10-01 18:45:27

解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放的相关文章

H5 的 video

上个星期,项目需求是在公司服务器上放些视屏,通过二维码或链接分享出去,让客户访问.本来是一个很简单的东西,我首先想到的是H5的video 标签.这个标签已经被大多数主流浏览器支持(PC端的Chrome,安卓端浏览器,微信浏览器,QQ浏览器(自带播放器),以及IOS的safari都支持h5的video标签),而且使用简单. 在写好了页面以后,我拿了项目中的一个格式为mp4的视屏开始测试,发现在浏览器和安卓手机上是可以播放的,只是不能快进,但在苹果手机上没有反应.于是我把视屏用格式工厂转为h264/

在微信端使用video标签,播放结束会出现QQ浏览器推荐视频的解决办法(vue)

会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检测到使用了video标签的话(包括使用了基于h5的video写的插件),就会出现这种情况. 解决办法: html部分:(需要的是一个id选择器,其他的请忽略,src中的内容是调接口返回) <video autoplay id="end" controls :src="cha

H5 video标签的第二种格式

36-video标签的第二种格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>36-video标签的第二种格式</title> </head> <body> <!-- 1.格式: <video> <source src="" type

H5 video标签的属性

35-video标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>35-video标签</title> </head> <body> <!-- 1.什么是video标签? 作用: 播放视频 格式: <video src=""> </v

关于HTML5中Video标签无法播放mp4的解决办法

1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" autoplay="autoplay"> <source src="D:/video/hbg.mp4" type="video/mp4"> </video> 2.首先我自己从网上下载的一个MP4文件,IE10和谷歌都能

H5上传前预览视频(结合 video标签 &amp;&amp;h5 fileApi)

2017/09/14 发布 js代码: // hTML5实现表单内的上传文件框,上传前预览视频,刷新预览video,使用HTML5 的File API, // 建立一个可存取到该file的url,一个空的video标签,ID为video0,把选择的文件显示在video标签中,实现视频预览功能. // 需要选择支持HTML API的浏览器. $("#video").change(function(){ var objUrl = getObjectURL(this.files[0]) ;

h5 video标签的使用

 标签的布置 <video src="1.mp4" poster="1.jpg" id="vid" controls> 你的浏览器不支持该视频播放 </video> 标签的属性配置 autoplay  =>  自动播放 controls   =>  是否显示控件 width       =>  播放器的宽度 height     =>  播放器的高度 loog        =>  是否循环播

关于H5 video标签铺满盒子的问题

video标签两边不能铺满盒子:如图: 如果不考虑兼容IE浏览器可以使用CSS样式: video{ object-fit:fill;} 以上CSS不兼容IE 需要兼容IE建议去这里看看详细插件的使用 原文地址:https://www.cnblogs.com/yangjunboHTML/p/12160690.html

h5牛牛平台架设游戏开发的架构总结(一) 客户端

有问题Q1446595067官网:h5.haozibbs.com或http:\www.qabaa.com [客户端]1.关于游戏引擎在15年3月开始准备做h5游戏的时候,首先遇到的问题就是引擎选型的问题.当时市面上的2d引擎主要有3个:白鹭egret,layabox和cocos2d-js.一方面,是因为我以前用cocos2d-x(c++)做了一年多的手游客户端,所以,很自然就选择了cocos2d-js.另一方面,是因为当时市面上其他两个引擎的成功项目还不多.cocos引擎的每一次版本更新,我们都