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