H5 ios 播放flv 苹果手机不能播放h5视频

移动开发2024-06-14 11:36:37

目前浏览器都是支持H5中video视频播放，代码如下：

<video src="https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4"
	 id="video"
	 preload="auto" 
	 autoPlay={false} 
	 controls={true}
	  loop
	  muted
	  playsinline
	 style={{width: '100%', height: '210px',borderRadius:'10px'}} status="play"
	 poster="https://ykyl.oss-cn-qingdao.aliyuncs.com/app_image/activitie/day1000_title_img.jpg">
	<source src='https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4'  type="video/mp4"/>
	</video>

最近写了一个H5的视频播放功能，webview内嵌手机页面，遇到了一些问题，借鉴了博友很多，做了归纳总结，，将video的相关属性，属性的使用，不同的浏览器中属性的兼容性的问题都归纳进本文，所以有这一篇文章，video的所有问题都了如指掌！不吹牛了，直接上干货。

video标签的使用

video标签含有src、postor、preload、autopla、loop、controls、width、height、style等几个属性，以及一个内部使用的标签标签外，还可以包含当指定的视频都不能播放时，返回的内容。

HTML 4.01 与 HTML 5 之间的差异

preload 属性是HTML5中的新属性

语法

属性值： load：规定是否预加载视频可能的值：

auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频

如何获取视频的加载速度，让视频加载完后才让用户进入？

不能，没有任何的办法来判断视频的加载进度，而且在iOS中，只有视频在播放的时候，才临时去加载视频。因此，即使在video标签中写了preload属性也是不管用的。使用canplaythrough事件也是没法检测的，虽然video标签在加载的时候会触发canplaythrough方法，但播放时依然会有卡顿的现象，而且某些android还不支持次属性。

播放视频时只有声音没有图像

有部分原因是视频的编码不正确，在mp4格式的视频中，只支持h.264 的视频，我的项目中遇到了这种情况，但不是视频编码的问题，有声音没图像的情况，那么应该就是视频有点大了，然后视频压缩了一下，

解决方案：在用户点击和视频正式播放之前添加一个loading效果，当视频正式播放的时候就取消loading。

function video_loading( $video ){
        $('.video_loading').show();
 
        var timer = setInterval(function(){
            var currentTime = $video[0].currentTime; // 检测当前的播放时间
 
            if( currentTime>0 ){
                $('.video_loading').hide();
                clearInterval( timer );
            }
        }, 100)
    }

播放视频时只有声音没有图像

IE7，8以及早起浏览器兼容性

我们可以在网页中使用video来播放视频，但是如果使用早起浏览器的访问者可能无法正常观看这个视频，此外，由于视频编码器的历史渊源导致各种各种浏览器支持的视频格式不同，应对这些问题，想在网页中使用HTML5 video功能，可以按照下面三个步骤操作，

第一步：提前准备好多个格式视频文件

目前没有一个视频格式兼容所有浏览器，唯一的解决方法就是把视频转换成多种格式。
1、mp4 格式的视频，可以在苹果设备中使用；
2、pgv格式的视频，用在火狐浏览器中，
3、webm 格式的视频，这个可以用在谷歌浏览器；
视频转换工具国内的功能比较少，转换格式可能没有上面后两个，而且质量良莠不齐，往往需要注册才能使用，推荐一个国外的工具(FQ), http:’'www.online-convert.com。甚至不用安装软件，直接选择响应的目标格式，然后上传视频，配置一下参数就可以转换出来，没有合适工具的朋友，可以尝试一个

第二步：使用多个source上传不同格式的视频，

第三步：为老旧浏览器做兼容

1、我们可以把视频上传到优酷，土豆或者爱奇艺等国内著名视频服务商，直接调用视频代码
2、在老旧版本的浏览器使用flash视频文件
3、head部分引用<scriptsrc=“http://html5media.googlecode.com/svn/trunk/src/html5media.min.js”>

html5media是一个让video、audio标签在旧版本IE全面兼容的javascript类库，它不依赖与任何javascript框架，页面使用了html5media之后，当老版的浏览器不支持html5时，它将会自动切换成flash模式的flowplayer播放器尝试播放。

4、使用videoJS插件实现兼容性的问题 http://videojs.com

不同手机之间的兼容，ios10.1.1不支持video标签无视频，ios9不支持多次播放的问题

因为最近做了一个内嵌的webview的产品宣传落地页面，自己的手机是ios10.1.1系统，同事一只顽固鸟还保持使用ios9系统，iphonex完全没有问题，ios11也没有问题，安卓手机可以播放，也支持多次播放，但是播放按钮是偏上的，因为框架是react，就从git上面找到了一个react-html5video插件，但是我的iphonex手机上面的播放按钮一只是一个加载图片，不知道为什么，最终做了一个判断

H5 ios 播放flv 苹果手机不能播放h5视频,H5 ios 播放flv 苹果手机不能播放h5视频_H5 ios 播放flv,第1张

H5 ios 播放flv 苹果手机不能播放h5视频,H5 ios 播放flv 苹果手机不能播放h5视频_ide_02,第2张

代码奉上：给有问题的前端同僚

import { DefaultPlayer as Video } from 'react-html5video';
	import 'react-html5video/dist/styles.css';
	{
        isIphoneX() ? <video src="https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4"
        id="video" preload="auto" autoPlay={false} controls={true} loop muted  playsinline
        style={{width: '100%', height: '210px',borderRadius:'10px'}} status="play"
        poster="https://ykyl.oss-cn-qingdao.aliyuncs.com/app_image/activitie/day1000_title_img.jpg"
		 className='marginTop30'>
		<source src='https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4'  type="video/mp4"/>
         </video>:
           <Video autoPlay loop muted
         controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
          poster="https://ykyl.oss-cn-qingdao.aliyuncs.com/app_image/activitie/day1000_title_img.jpg"
          style={{width:'100%',height:'192px',marginTop:'30px'}}
          onCanPlayThrough={() => {
            // Do stuff
          }}>
           <source src="https://ykyl.oss-cn-qingdao.aliyuncs.com/expert_class/lizheng/NeonatalJaundice20180625.mp4" type="video/mp4" />
           <track label="English" kind="subtitles" srcLang="en" src="" default />
         </Video>
       }

查看全文

https://www.xamrdz.com/mobile/47d1963916.html

H5 ios 播放flv 苹果手机不能播放h5视频

video标签的使用

相关属性

1、src属性和poster属性

2、preload属性

3、autoplay属性

4、loop属性

5、controls属性

6、source属性

HTML 4.01 与 HTML 5 之间的差异

语法

如何获取视频的加载速度，让视频加载完后才让用户进入？

播放视频时只有声音没有图像

播放视频时只有声音没有图像

IE7，8以及早起浏览器兼容性

第一步：提前准备好多个格式视频文件

第二步：使用多个source上传不同格式的视频，

第三步：为老旧浏览器做兼容

不同手机之间的兼容，ios10.1.1不支持video标签无视频，ios9不支持多次播放的问题

相关文章：