男左女右中国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. s2010编译C++ 链栈的使用

    // CTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...

  2. APM概述

    当前 APM(Application Performance Management (Monitoring)/ 应用性能管理)或者叫 Distributed Tracing System 工具有: G ...

  3. python 字符串实例:检查并判断密码字符串的安全强度

    检查并判断密码字符串的安全强度 import string def check(pwd): #密码必须至少包含六个字符 if not isinstance(pwd,str) or len(pwd)&l ...

  4. jenkins#安装jenkins

    1. 访问官网下载地址https://jenkins.io/zh/download/ 2. 选择自己的平台,然后按照文档进行操作: 主要按照文档来,下面是我按照文档按照的一个记录 #访问 https: ...

  5. 005、Java中使用文档注释

    01. 代码如下: package TIANPAN; /** * 此处为文档注释 * @author 田攀 微信382477247 */ public class TestDemo { public ...

  6. Arrays类常用方法

    Arrays类 3.1 概述 java.util.Arrays 此类包含用来操作数组的各种方法,比如排序和搜索等.其所有方法均为静态方法. 3.2 操作数组的方法 1.将参数数组变成字符串 publi ...

  7. TCP/IP 三次握手,四次断开

    TCP/IP 三次握手,四次断开 一.TCP报文格式                     TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷 本. 下面是TCP报文格式图: 图 ...

  8. 记录:JAVA抽象类、接口、多态

    JAVA抽象类.接口.多态 1. 多态 定义 多态是同一个行为具有多个不同表现形式或形态的能力.(多态就是同一个接口,使用不同的实例而执行不同操作) 如何实现多态 继承和接口 父类和接口类型的变量赋值 ...

  9. Centos7安装mysql5.7.21

    1.卸载系统自带的 MariaDB [root@CentOS ~]# rpm -qa | grep mariadb mariadb-libs--.el7.x86_64 [root@CentOS ~]# ...

  10. 九十五、SAP中查看自定义包的所有模块,对象,函数主,事务等

    一.输入SE80 二.选择包,再查下Z* 三.可以看到,查下出来的包 四.可以看到我们想要的内容了