APP分享视频H5页面

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

出现的问题：

（1）URL参数为中文的时候乱码；

（2）vedio点击默认是QQ，微信的播放器；

（3）给视频添加一个默认的封面。

解决方法：

一、作一个app分享页面，由于只有一个页面，前端和后台接口有跨域的问题，后台不想改，因此就商量说APP要被分享的页面直接传递参数给我。

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

二、让传字段的时候用 encode编码，我用decode解码，发如今谷歌中仍是会乱码，缘由是谷歌浏览器本身解析了一遍。

三、考虑到主要分享在微信端，因此决定 encode两遍，顺利解决了以上的问题。

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

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

六、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);