微信網頁開發之video標籤[HTML5微信播放器video]

先了解一下w3c video標籤

大致主要的也就這麼點，更詳細的請去自己W3C去閱覽；
先說爲什麼會寫這篇文章，因爲公司最近有個需求，就是微信頁面上要有APP端錄製的視頻。
說白了就是微信網頁要有視頻，要播放視頻

總結一下我在開發中遇到的問題；

---

1. angular 的ng-src 作用於video src 的時候沒有什麼效果，具體我也不太曉得；angular渲染數據的時候唯獨src上渲染不出來；最後的解決辦法是走attr方法渲染到video SRC的視頻地址；
2. 如果你不做任何的修改，直接就抓住video標籤就開始寫的話，那麼IOS與安卓在微信播放按鈕的呈現方式是不一樣的，所以我就小小的強迫症了一下給他們做到了播放按鈕的統一，網上也有很多方法，但是不知道爲什麼，我放到微信上就不好使用；蛋疼…
3. 在做輪播圖的時候輪播圖中也有視頻，但遇到的情況是點擊視頻後退出，他媽的整個頁面變成橫屏了！對你們沒有看錯，整個頁面他媽的竟然全都是橫屏，改都改不回來；

如何在安卓與IOS做到H5video播放按鈕的統一？

---

要做到統一，我用了一些黑科技，效果比網上有些帖子效果更好，並且兼容程度很大，其實很簡單，我的做法就是，在一張靜態圖片上把video定位到圖片上並且透明，用戶進入頁面看到的有個播放按鈕的圖片，點擊圖片後，其實觸發了隱藏的video標籤就進入了播放界面；【在一個頁面上播放的邏輯我現在還沒有做到過，這些只是點擊進入播放界面】

下面是代碼

<li id="myindeximg" class="lazy videos"
                                        style=" background-size: 100%; background-repeat: no-repeat;"
                                        data-original="{{value.videos.surface}}">

                                        <!--播放按鈕-->
                                        <span id="h5vider" class="iconfont txt30">&#xe60a;</span>
                                        <!--播放按鈕-->

                                        <!--定位在li之上隱藏的video標籤-->
                                        <video id="tenvideo_video_player_0" -webkit-playsinline x-webkit-airplay
                                               controls="controls"
                                               loop="loop" width="80" height="80"
                                               poster="http://i.gtimg.cn/qqlive/images/20150608/black.png"
                                               data-videos="{{value.videos.url}}"
                                               src="{{value.videos.url}}">
                                        </video>
                                    </li>

在這裏大家要清楚一點在安卓系統中的video標籤可以通過dom.click()直接出發，但IOS不行，我這樣的移動方法其實就是爲了兼容IOS；

下面是JS的邏輯

                    wwm.iosanfn(function (api) {
                        console.log(api)

                        if (data.videos != null) {
                            if (api == '安卓') {


                                $('#tenvideo_video_player_0').remove();



                                var imgs = '<video id="videos2" -webkit-playsinline x-webkit-airplay  controls="controls" loop="loop"  width="1" height="1"   src="' + data.videos.url + '"></video>'
                                $('body').append(imgs)

                                $('#h5vider').on('click', function (e) {
                                    e.stopPropagation();

                                    $('#videos2').click();
                                });

                            } else {
                                $('#tenvideo_video_player_0').attr('src', data.videos.url);

                            }
                        } else {
                            $('.videos').remove();
                        }


                    });