H5的视频解决方案(1) —— mobile video内联播放_Joyce的前端日常的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

属性	值	含义
object-fit	fill 或 cover或 contain…	视频填充模式，这三个最常用，fill会被拉伸，可以在css文件中设置。
preload	auto 或 metadata 或 none	该属性在某些情况下被忽略

(1) webkit-playsinline和playsinline

在手机浏览器和QQ等App中播放H5视频，系统会自动接管进行全屏播放。显然，在很多场景中，我们需要在H5的页面中进行播放，则需要加上 webkit-playsinline ，在iOS10之后需要加上 playsinline 。所以，建议同时加上这两个属性。

(2) android微信

按照上述属性设置之后，大多数情况都可以满足，唯独android的微信。它使用的是腾讯x5内核，不遵循X5web标准，会强制全屏。

这个是腾讯H5同层播放器接入规范：
https://x5.tencent.com/tbs/guide/video.html

x5-video-player-type="h5" 启用Ｈ5同层播放器

x5-video-player-fullscreen="true" 视频播放时将会进入到全屏模式。

x5-video-player-fullscreen="portraint" 声明播放器支持的方向，此属性只在声明了x5-video-player-type=”h5”情况下生效。

在其他资料中，常常到这里就结束了。亲测根本没有办法实现。播放时，上下都是黑色，视频在中间。

根据腾讯的X5同层播放器试用报告：
https://x5.tencent.com/tbs/guide/web/x5-video.html 才找到了实现方式。
【强烈推荐这篇文章】 还讲解了如果增加topbar等问题。

接下来，通过这篇文章提供的方法继续。

按照官方文档所述，只要修改video元素的「object-position」属性，就可以修改视频部分的显示位置，但实际上还要把video元素的宽高设成屏幕的宽高才行。

官方提供了两个 事件回调 ：

x5videoenterfullscreen 进入全屏通知
x5videoexitfullscreen 退出全屏通知

<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>android wechat playsinline</title>
  <style>
    body{
      margin: 0;
      background: wheat;
    .player{
      width: 100%;
      height: 300px;   //有的安卓浏览器不支持vw，使用px优雅降级
      height: 56.25vw; // 16:9
      position: relative;
    .player .video{
      width: 100%;
      height: 100%;
      object-position: center top;
    .content{
      text-align: center;
  </style>
</head>
    <div class="player">
      <video id="video" class="video" width="1" height="1" preload="auto" style="object-fit:contain;height:300px;height: 56.25vw;" webkit-playsinline="true" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" >
        <source type="audio/mp4" src="https://images.apple.com/media/us/iphone-7/2016/5937a0dc_edb0_4343_af1c_41ff71808fe5/camera/4k-footage/iphone7-4k-footage-cc-us-20160907_1280x720h.mp4">
      </video>
    </div>
    <div class="content">
      <p>hello content</p>
      <button onclick="document.getElementById('video').play();">play</button>
    </div>
  </div>
  <script>
    var myPlayer = document.getElementById('video');
    myPlayer.addEventListener('x5videoenterfullscreen',function(){
      myPlayer.style.width = window.screen.width + 'px';
      myPlayer.style.height = window.screen.height + 'px';
    myPlayer.addEventListener('x5videoexitfullscreen',function(){
      myPlayer.style.width = myPlayer.style.height = "";
    },false);
  </script>
</body>
</html>

测试这个方案是可行的。

(3) 最佳实践

上述只是对内联播放的测试，但并非项目实践。

在手机上如果视频没有播放过不会显示出来，这个区域会是空的，video有 poster 属性可以配置封面，但是安卓的一些浏览器不支持。所以，为了更好的兼容性，需要手动添加封面。
这里写图片描述

<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>android wechat playsinline demo</title>
  <style>
      box-sizing: border-box;
    body{
      margin: 0;
      background: wheat;
    .player{
      width: 100%;
      height: 300px;
      height: 56.25vw;
      position: relative;
    .player .video{
      width: 100%;
      height: 100%;
    .poster{
      background:url('http://via.placeholder.com/350x150?text=poster') no-repeat center center;
      background-size: cover;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    .poster::after{
      content: '';
      width: 50px;
      height: 50px;
      background: url("https://milklife.com/sites/all/themes/breakfast/owl-carousel/play-button@2x.png") no-repeat;
      background-size: contain;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
    .fullscreen .player{
      /* margin-top: 80px; */
    .fullscreen video{
      object-position: center 0;
      height: 0.5625vw;
    .content{
      text-align: center;
  </style>
</head>
    <div class="player">
      <video id="video" class="video" width="1" height="1" preload="auto" style="object-fit:contain" webkit-playsinline="true" playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" >
        <source type="audio/mp4" src="https://images.apple.com/media/us/iphone-7/2016/5937a0dc_edb0_4343_af1c_41ff71808fe5/camera/4k-footage/iphone7-4k-footage-cc-us-20160907_1280x720h.mp4">
      </video>
      <div id="poster" class="poster">
      </div>
    </div>
    <div class="content">
      <p>hello content</p>
    </div>
  </div>
  <script>
    var myPlayer = document.getElementById('video');
    document.getElementById("poster").addEventListener("click", function(){
      myPlayer.play();
      document.getElementById('poster').style.display='none';
    myPlayer.addEventListener('x5videoenterfullscreen',function(){
      myPlayer.style.width = window.screen.width + 'px';
      myPlayer.style.height = window.screen.height + 'px';
      document.body.classList.add('fullscreen');
      document.getElementById('poster').style.display='none';
    myPlayer.addEventListener('x5videoexitfullscreen',function(){
      myPlayer.style.width = myPlayer.style.height = "";
      document.body.classList.remove('fullscreen');
      document.getElementById('poster').style.display='block';
    },false);
  </script>
</body>
</html>

以上代码是实现视频播放的雏形。可以根据项目的实际情况，比如在视频播放完成的时候再将封面加回来等。

(4) 其他尝试

为了解决用户点击播放按钮，但视频还未加载到可播放的程度。

【功能】点击封面播放，如果此时视频可以播放则播放，不可以显示加载中，等加载完成后开始播放。

【实现】通过video的canplay属性判断是否加载完成，并注册canplay事件，在加载完成后播放。

【失败原因】iOS不支持canplay事件注册，在安卓上测试是可以的。

尝试用loadeddata实现全部加载完了再播放iOS也不支持，安卓支持。

(5) 仍存在的问题

目前在上文第三小节中提到的最佳实践已知在华为P9的系统自带浏览器上不能实现内联播放。但是华为CAZ-AL 10却是可以的，包括在UC浏览器等其他环境也是可以的。如果有解决的方法，请联系我，或在评论中留言。

mobile内联播放(1) webkit-playsinline和playsinline(2) android微信(3) 最佳实践(4) 其他尝试和存在问题mobile内联播放内联播放指的是视频在文档流中直接进行播放，不会弹出新的播放窗口的方式。&amp;amp;amp;amp;amp;amp;amp;lt;video id=&amp;amp;amp;amp;amp;amp;quot;video&amp;amp;amp;amp;amp;

对于小图标和文字的混合排版的确是个很麻烦的问题，网上有人总结了以下几种解决方法，仅供大家参考： 1、可以把小图标设为背景，并设定<li>的padding值。比较常见于<ul><li>制作的菜单中；（注重：可能你经常会看到在IE5下定义在LI中的小图片会在文字下面，原因就是制作者把样式定义在A中了，IE5对内联元素补白样式支持不完善，所以在一般情况下把背景小图标定义在LI中，因为LI在默认的情况下是有块元素的特性。） 2、可以对图标进行样式定义，设定img属性margin或padding的值； 3、可以在图片中使用align=\"absmiddle\"来让图片绝对居中，alibaba英文

前两天，美团推出的杨洋 H5 火爆朋友圈。里面主要的是多段视频播放、暂停。听起来很简单，但是由于腾讯白名单限制，在微信浏览器，qq浏览器，会自动将 video 标签中非腾讯域名的视频，自动全屏，结尾追加视频推荐。并且白名单申请入口已经关闭。全屏适配播放并在视频上放置其他元素。例如下载按钮。苹果手机嵌入视频小窗播放。目前替...

安卓开发的app嵌入 h5 出现，ios未发现出现这个灰色图，手机（安卓，ios）浏览器没有发现出现这个图。这个是安卓webview默认的播放器背景图，应在安卓开发上修改而不是在html上修改， h5 上的 video 修改无效并且找不到位置。 webview.setWebChromeClient(new WebChromeClient() { @Override public Bitmap getDefault Video Poster() { return Bitma......

随着 H5 的兴起，传统的C/S构架产品逐步迁移到B/S架构上，但是 H5 的版本演进一直没能很好的解决实时视频播放的问题，从HLS到WebRtc 再到 Wasm 都伴随着它的问题， HLS延迟大满足不了实时流性要求; WebRTC 复杂以及更适合视频会议的场景使得在安防行业很难大规模应用， Wasm的出现给人们带来了希望，但是由于目前性能和原生应用相差效远，在 2K 等高分辨率的情况，很难达到实时流解码; 因此越来越多的客户迫切需要一种能在安防行业基于B/S框架的视频播放方案 #.此视频播放插件支持以下功能： 1. 支持基于 H5 的主流浏览器( Chrome ,Mozilla Firefox,360浏览器,2020年后微软发布的Edge等) 2. 支持音频(g711,acc,mp3等) 播放 3. 支持 H264,H265,SVAC 视频解码播放 4. 支持 GPU加速（Nvidia Cuda8以上） 5. 支持协议:RTSP,RTMP,ONVIF,GB/T28181 海康私有SDK,大华私有SDK,宇视私有SDK,等其它私有协议的实时流播放 6. 支持海康/大华/宇视设备或平台录像回放 7. 支持本地文件播放 (.mp4,mkv,avi,asf等格式)

一、视频无法播放问题最近做了个播放 MP4 视频的网页，发现PC端能正常播放视频，但是部分手机浏览器，例如UC浏览器，播放视频要么一直转圈加载，要么报-9324,19000错误。查了很多资料，基本都是说 video 标签的参数配置不对或者浏览器版本不兼容，没啥用。最后发现问题出在网络协议上， H5 做的页面在部分手机端的浏览器上只能用http或者websocket协议传输视频数据，不能用https协议。 解决方案 就是在 video 标签中使用完整的http 视频链接，即使用http前缀的绝对路径。

数列的函数，你会怎么做？我可以回答这个问题。Fibonacci 数列的递推公式为 F(n) = F(n-1) + F(n-2)，其中 F() = ，F(1) = 1。我们可以使用内联函数和递归调用来编写 Fibonacci 数列的函数。以下是一个示例代码： inline int fibonacci(int n) { if (n == ) { return ; } else if (n == 1) { return 1; } else { return fibonacci(n-1) + fibonacci(n-2); 在这个函数中，我们首先判断 n 是否为或 1，如果是，则直接返回相应的值。否则，我们使用递归调用来计算 F(n)。由于这个函数是内联函数，所以在编译时会直接将函数体插入到调用处，从而提高了执行效率。