成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

H5 視頻播放解決方案

madthumb / 767人閱讀

摘要：里面主要的是多段視頻播放暫停。本文包含全屏適配播放并在視頻上放置其他元素。蘋果手機(jī)嵌入視頻小窗播放。目前替換幾種解決方案的實(shí)測(cè)。安卓會(huì)自動(dòng)全屏播放。如下圖解決方法監(jiān)聽屏幕全屏事件中手動(dòng)設(shè)置的值為。

前兩天，美團(tuán)推出的楊洋H5火爆朋友圈。里面主要的是多段視頻播放、暫停。
聽起來(lái)很簡(jiǎn)單，但是由于騰訊白名單限制，在微信瀏覽器，qq瀏覽器，會(huì)自動(dòng)將video標(biāo)簽中非騰訊域名的視頻 ，自動(dòng)全屏，結(jié)尾追加視頻推薦。并且白名單申請(qǐng)入口已經(jīng)關(guān)閉。
本文包含

全屏適配播放 并在視頻上放置其他元素。例如下載按鈕。

蘋果手機(jī) 嵌入視頻小窗播放。

目前替換幾種解決方案的實(shí)測(cè)。

上傳至騰訊視頻（實(shí)測(cè)已經(jīng)不行）

gif(尺寸太大)

先上代碼 
//html


//js
var video = document.querySelector("video");
videoMethod(video);

function videoMethod(video) {
    video.addEventListener("touchstart", function () {
        video.play();
    });
    setTimeout(function () { video.play(); }, 1000);
    document.addEventListener("WeixinJSBridgeReady", function (){ 
        video.play();
        video.pause();
    }, false);
    video.addEventListener("ended", function (e) {
      video.play();
    })
    //進(jìn)入全屏
    video.addEventListener("x5videoenterfullscreen", function(){
    
      window.onresize = function(){
        video.style.width = window.innerWidth + "px";
        video.style.height = window.innerHeight + "px";
      }
    })
    //退出全屏
    video.addEventListener("x5videoexitfullscreen", function(){
      window.onresize = function(){
        video.style.width = 原尺寸;
        video.style.height = 原尺寸;
      }
     
    })
}

//引用js
iphone-inline-video

//css
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
  opacity: 0;
  pointer-events: none;
  width: 5px;
}
.videobox {
  width: 4.78rem;
  height: 7.8rem;
  position: absolute;
  top: 3.2rem;
  left: 1.2rem;
}
video{
  width: 4.2rem;
  height: 7.69rem;
  position: absolute;
  left: .22rem;
  top: .7rem;
  overflow: hidden;
  margin-top:-.7rem;
}
詳細(xì)解讀 屬性

preload="auto"

是否預(yù)加載數(shù)據(jù)

auto 頁(yè)面加載后載入整個(gè)數(shù)據(jù)

meta 頁(yè)面加載后載入元數(shù)據(jù)

none 不載入視頻

webkit-playsinline && playsinline="true"

小窗播放 使視頻不脫離文本流，但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,結(jié)果就是蘋果支持，安卓不支持。安卓會(huì)自動(dòng)全屏播放。

x-webkit-airplay="allow"

字面意思 容許airplay (通過(guò)AirPlay可以把當(dāng)前的視頻投放到支持此技術(shù)的其他設(shè)備上。)

如果是 video 標(biāo)簽，可以通過(guò) x-webkit-airplay="allow" 屬性開啟；

如果是 embed 標(biāo)簽，可以通過(guò) airplay="allow" 屬性開啟。

x5-video-player-type="h5" && x5-video-player-fullscreen="true" &&x5-video-orientation="portraint"

建議看官網(wǎng)文檔非常詳細(xì) 。十分重要必看。

object-fit:fill

填充尺寸 詳情

方法

自動(dòng)播放

setTimeout(function () { video.play(); }, 1000);
//微信webview全局內(nèi)嵌，WeixinJSBridgeReady方法
document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false);
//誘導(dǎo)用戶觸摸
video.addEventListener("touchstart", function () {
    video.play();
});

封面增減

除ended,timeupdate其他事件慎用
video.addEventListener("timeupdate",function (){
    //當(dāng)視頻的currentTime大于0.1時(shí)表示黑屏?xí)r間已過(guò)，已有視頻畫面，可以移除浮層（.pagestart的div元素）
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $(".pagestart").fadeOut(500);
        video.isPlayed = !0;
    }
})
框架中使用 react中使用 
因我們實(shí)現(xiàn)h5播放效果，需要在video上設(shè)置屬性。但我們知道react自定義屬性，需要添加data-前綴。使得生成的節(jié)點(diǎn)屬性 并不是 x5要求的屬性。造成失效。

感謝 @weishijun14 提供解決方法

React 15及更早版本
componentDidMount: function() {
  var element = ReactDOM.findDOMNode(this.refs.test);
  element.setAttribute("custom-attribute", "some value");
}

See https://jsfiddle.net/peterjma...

React 16
自定義屬性將會(huì)被原生支持在React 16,這個(gè)在RC版本中的特性，以及即將被公布。這意味著，加入自定義屬性在元素中將會(huì)非常簡(jiǎn)單：
render() {
  return (
    

  );
}
weishijun14 實(shí)測(cè)版本
ref={(node) => { if(node){node.setAttribute("xmlns:xlink", "w3.org/1999/xlink")} }}
vue中使用 
直接放在template中就可以了
可能遇到的問(wèn)題（坑）

安卓手機(jī)全屏播放 邊線問(wèn)題

安卓手機(jī)中全屏播放視頻，在左右會(huì)出現(xiàn)大概一像素的邊線暴露，不能完全覆蓋屏幕。如下圖

解決方法：監(jiān)聽屏幕全屏事件中（ video.addEventListener） 手動(dòng)設(shè)置video 的left值為 0。

問(wèn)題圖
參考文獻(xiàn)

https://github.com/gnipbao/ib...
https://x5.tencent.com/tbs/gu...
http://zhaoda.net/2014/10/30/...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/11024.html

相關(guān)文章

  • 談?wù)劤Ｒ?em>H5制作方法——視頻與CSS3

    摘要：但目前白名單申請(qǐng)途徑已經(jīng)關(guān)閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機(jī)自動(dòng)全屏以及視頻播放完畢會(huì)跳出廣告的問(wèn)題，并且可以實(shí)現(xiàn)交互。 本文在H5動(dòng)效的常見制作手法的基礎(chǔ)上，對(duì)相印的H5動(dòng)效制作手法進(jìn)行了擴(kuò)展和整理，并結(jié)合案例談?wù)勗趺磳⑵渥龅蒙鷦?dòng)。 視頻類 1、體驗(yàn)案例 視頻類h5可以帶給用戶動(dòng)效逼真，流暢的體驗(yàn)。雖然說(shuō)制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創(chuàng)造出...

    tracy 評(píng)論0 收藏0

  • H5視頻活動(dòng)踩坑

    摘要：最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。視頻的播放和暫停主要是調(diào)用和方法。最后需要注意的是在端播放視頻后是不會(huì)主動(dòng)退出同層播放器的。 最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。1、碰到問(wèn)題和解決方案1.1、ios 網(wǎng)頁(yè)中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會(huì)彈出播放器進(jìn)行全屏播放...

    walterrwu 評(píng)論0 收藏0

  • H5視頻活動(dòng)踩坑

    摘要：最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。視頻的播放和暫停主要是調(diào)用和方法。最后需要注意的是在端播放視頻后是不會(huì)主動(dòng)退出同層播放器的。 最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。1、碰到問(wèn)題和解決方案1.1、ios 網(wǎng)頁(yè)中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會(huì)彈出播放器進(jìn)行全屏播放...

    jzman 評(píng)論0 收藏0

  • H5視頻活動(dòng)踩坑

    摘要：最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。視頻的播放和暫停主要是調(diào)用和方法。最后需要注意的是在端播放視頻后是不會(huì)主動(dòng)退出同層播放器的。 最近做了一些嵌入視頻的活動(dòng)，積累了點(diǎn)視頻方面的經(jīng)驗(yàn)，下面記錄下別人和自己踩過(guò)的坑以及相應(yīng)的解決方案。1、碰到問(wèn)題和解決方案1.1、ios 網(wǎng)頁(yè)中播放視頻默認(rèn)全屏（點(diǎn)擊視頻會(huì)彈出播放器進(jìn)行全屏播放...

    DirtyMind 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<