男左女右中国APP需要做一个APP分享视频H5页面,效果图见下面的图。

出现的问题:

(1)URL参数为中文的时候乱码;

(2)vedio点击默认是QQ,微信的播放器;

(3)给视频添加一个默认的封面。

解决方法:

1、做一个app分享页面,因为只有一个页面,前端和后台接口有跨域的问题,后台不想改,所以就商量说APP要被分享的页面直接传递参数给我。

因为参数比较多,里面有些描述、名字的字段是中文,直接返回给我出现了乱码。

2、让传字段的时候用 encode编码,我用decode解码,发现在谷歌中还是会乱码,原因是谷歌浏览器自己解析了一遍。

3、考虑到主要分享在微信端,所以决定 encode两遍,顺利解决了以上的问题。

4、视频播放用传统的video点击后会默认为QQ或者微信默认的播放器,所以这边video的一些参数参照了 抖音 代码。

5、播放的视频默认有一张封面图片:参数是poster="img/img.png"。

6、IOS就整个参数直接编码了,安卓就很奇怪,传递过来的 “/”特殊符号会出现乱码,最后的解决办法说“字符不参与编码了”。

附录视频的代码:

<div style="text-align:center;">

<img onclick="playPause()" id="btn" src="img/anniu.png" />

<video id="video1" poster="" class="video-player" src="" preload="auto" type="video/mp4"

width="100%" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5"

x5-video-player-fullscreen="portraint" onerror="window.VIDEO_FAILED=1"></video>

</div>

<script type="text/javascript">

var myVideo = document.getElementById("video1");

var btn = document.getElementById("btn");

function playPause() {

if(myVideo.paused) {

myVideo.play();

btn.style.display = "none";

} else {

myVideo.pause();

}

}

</script>

赋值就直接用js

var VideoUserPortrait = getUrlParam('VideoUserPortrait') ? getUrlParam('VideoUserPortrait') : '';

$("#video1").attr("src", "https://api.212bg.com" + VideoUrl);

$("#video1").attr("poster", "https://api.212bg.com" + VideoUserPortrait);

$(".xtx").attr("src", "https://api.212bg.com" + VideoUserPortrait);

APP分享视频H5页面的更多相关文章

  1. 利用浏览器调试APP中的H5页面

    安卓手机的情况下,可以用chrome浏览器来调试. 打开地址: chrome://inspect/#devices 手机用USB数据线连接电脑,并启动USB调试模式. 只要在APP中打开H5页面,界面 ...

  2. 客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项

    混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...

  3. APP内的H5页面测试方法, 移动端的浏览器(例如UC浏览器)测试方法

    前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...

  4. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  5. app嵌入的H5页面的数据埋点总结

    好久没写博客了,大半年时间花费在了许多杂事上. 最近1个月专门为H5页面的app开发了一些埋点功能,主要是考虑到以后的可复制性和通用型,由于不是前端开发出身,相对来说还是比较简陋的. 正题开始:H5页 ...

  6. 混合app开发,h5页面调用ios原生APP的接口

    混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...

  7. app内嵌 h5页面 再滑动的时候 触发击穿底下的一些touchstart事件

    我们的目的是再滑动的时候 不要触发到touchstart事件. // 再滑动的时候无法点开视频 var is_scroll_start,is_scroll_end; $(window).on({ 't ...

  8. 嵌套移动APP端的H5页面meta标签

    <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...

  9. HTML5_嵌套移动APP端的H5页面meta标签

    <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...

随机推荐

  1. activity标题栏和状态栏操作

    修改显示的标题 1.修改AndroidMainfest.xml文件的label标签 2.setTitle("标签"); 去掉标签的显示 1.android:theme=" ...

  2. 我的Grunt之旅-序章

    时间:2018-03-05 13:52  事件:安装Grunt 相关网址: grunt官网:https://gruntjs.com node.js下载地址 :https://nodejs.org/en ...

  3. SpringBoot如何返回页面

    SpringBoot中使用Controller和页面的结合能够很好地实现用户的功能及页面数据的传递.但是在返回页面的时候竟然会出现404或者500的错误,我总结了一下如何实现页面的返回以及这里面所包含 ...

  4. java.jvm调优

    _amazing~ 基本: 整理:

  5. maven知识结构笔记

    1.什么是maven Maven 翻译为"专家"."内行",是 Apache 下的一个纯 Java 开发的开源项目.基于项目对象模型(缩写:POM)概念,Mav ...

  6. CPU各个具体的指标含义

    CPU各个具体的指标含义解释如下: ①CPU(监测到的master主机上的CPU使用情况) 从图中看出,一共有五个关于CPU的指标.分别如下: 1. User User表示:CPU一共花了多少比例的时 ...

  7. Mysql多对多关系的查询

    1.创建user表 2.创建gateway表 3.创建user_gateway表 4.创建device表 5.创建gateway_device表 6.创建一个实体类 public class Devi ...

  8. 【Linux】linux内核学习

    linux内核获取 官网: https://www.kernel.org/ Linux操作系统的核心是模块化,可以使用lsmod命令查看内核模块,下面展示已载入系统的模块: [root@172.16. ...

  9. Oracle IF-ELSE条件判断结构

    关于条件判断的几个函数: 一.IF-ELSE 判断语句1.IF 语法 IF 表达式 THEN ... END IF; 输入账号名 kiki 以登陆账号 declare v_name ):='& ...

  10. zoj 1483 划分类DP

    还是看了little_w大神写的才知道怎么写,看完发现自己题意也理解错了,里面有个neighboring,意思就是你指定任务的时候指定的是原序列中连续的一段 然后就是怎么DP了,新学了个很好的dp模型 ...