APP分享视频H5页面
男左女右中国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页面的更多相关文章
- 利用浏览器调试APP中的H5页面
安卓手机的情况下,可以用chrome浏览器来调试. 打开地址: chrome://inspect/#devices 手机用USB数据线连接电脑,并启动USB调试模式. 只要在APP中打开H5页面,界面 ...
- 客户端相关知识学习(一)之混合开发,为什么要在App中使用H5页面以及应用场景、注意事项
混合开发 随着移动互联网的高速发展,常规的开发速度已经渐渐不能满足市场需求.原生H5混合开发应运而生,目前,市场上许多主流应用都有用到混合开发,例如支付宝.美团等.下面,结合我本人的开发经验,简单谈一 ...
- APP内的H5页面测试方法, 移动端的浏览器(例如UC浏览器)测试方法
前言: 用appium做UI自动化,测试APP里面的H5和测试手机浏览器打开的H5的操作流程上是有所区别的.比如要测试APP内嵌的H5需要先操作appium启动APP,然后通过context切到web ...
- ios下app内嵌h5页面是video适配问题
ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...
- app嵌入的H5页面的数据埋点总结
好久没写博客了,大半年时间花费在了许多杂事上. 最近1个月专门为H5页面的app开发了一些埋点功能,主要是考虑到以后的可复制性和通用型,由于不是前端开发出身,相对来说还是比较简陋的. 正题开始:H5页 ...
- 混合app开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- app内嵌 h5页面 再滑动的时候 触发击穿底下的一些touchstart事件
我们的目的是再滑动的时候 不要触发到touchstart事件. // 再滑动的时候无法点开视频 var is_scroll_start,is_scroll_end; $(window).on({ 't ...
- 嵌套移动APP端的H5页面meta标签
<meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...
- HTML5_嵌套移动APP端的H5页面meta标签
<meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...
随机推荐
- bsearch的使用
懒得写二分查找,结果发现stdlib里自带了二分查找. C 库函数 void *bsearch(const void *key, const void *base, size_t nitems, si ...
- 回收 PV【转】
当 PV 不再需要时,可通过删除 PVC 回收. 当 PVC mypvc1 被删除后,我们发现 Kubernetes 启动了一个新 Pod recycler-for-mypv1,这个 Pod 的作用就 ...
- Timer(阿里CTF)
下载文件之后发现是.apk类型文件,于是百度搜索了一下推荐再电脑上安装安卓模拟器,都尝试了一下逍遥安卓是真的不好用,小白觉得还是BlueStacks好用一些,下载之后去安装打开就看到了, 什么都没有发 ...
- 【pwnable.kr】 [simple login]
Download : http://pwnable.kr/bin/login Running at : nc pwnable.kr 9003 先看看ida里面的逻辑. 比较重要的信息时input变量再 ...
- python format使用方法
#使用format 方法进行格式化 print("The number {1:} in hex is: {1:#x}, the number {0:} in oct is {0:o}&quo ...
- Ubuntu下C++编译指令总结
本实例只是简单的调用了一个libcurl.a的静态库,实例代码如下: #include <curl/curl.h> #include <iostream> using name ...
- Hibernate(十)--spring整合hibernate
结构: Spring和Hibernate整合借助于HibernateTemplate applicationContext.xml <?xml version="1.0" e ...
- Python 3.8 新功能【新手必学】
Python 3.8 是 Python 编程语言的最新主要版本, 它包含许多新功能和优化. Python 3.8 Python 3.8 的一些新功能包括: 1. 海象运算符 PS:很多人 ...
- js加密(十二)yy.com rsa
1. url: https://aq.yy.com/ 2. target: 登录js 3. 是一个简单的rsa加密,找到加密的js文件,全部复制出来,修改一下就好. 4. 和网页中的一样
- 058、Java中定义一个没有参数没有返回值的方法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...