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, ...
随机推荐
- s2010编译C++ 链栈的使用
// CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...
- APM概述
当前 APM(Application Performance Management (Monitoring)/ 应用性能管理)或者叫 Distributed Tracing System 工具有: G ...
- python 字符串实例:检查并判断密码字符串的安全强度
检查并判断密码字符串的安全强度 import string def check(pwd): #密码必须至少包含六个字符 if not isinstance(pwd,str) or len(pwd)&l ...
- jenkins#安装jenkins
1. 访问官网下载地址https://jenkins.io/zh/download/ 2. 选择自己的平台,然后按照文档进行操作: 主要按照文档来,下面是我按照文档按照的一个记录 #访问 https: ...
- 005、Java中使用文档注释
01. 代码如下: package TIANPAN; /** * 此处为文档注释 * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Arrays类常用方法
Arrays类 3.1 概述 java.util.Arrays 此类包含用来操作数组的各种方法,比如排序和搜索等.其所有方法均为静态方法. 3.2 操作数组的方法 1.将参数数组变成字符串 publi ...
- TCP/IP 三次握手,四次断开
TCP/IP 三次握手,四次断开 一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷 本. 下面是TCP报文格式图: 图 ...
- 记录:JAVA抽象类、接口、多态
JAVA抽象类.接口.多态 1. 多态 定义 多态是同一个行为具有多个不同表现形式或形态的能力.(多态就是同一个接口,使用不同的实例而执行不同操作) 如何实现多态 继承和接口 父类和接口类型的变量赋值 ...
- Centos7安装mysql5.7.21
1.卸载系统自带的 MariaDB [root@CentOS ~]# rpm -qa | grep mariadb mariadb-libs--.el7.x86_64 [root@CentOS ~]# ...
- 九十五、SAP中查看自定义包的所有模块,对象,函数主,事务等
一.输入SE80 二.选择包,再查下Z* 三.可以看到,查下出来的包 四.可以看到我们想要的内容了