摘要:里面主要的是多段視頻播放暫停。本文包含全屏適配播放并在視頻上放置其他元素。蘋果手機嵌入視頻小窗播放。目前替換幾種解決方案的實測。安卓會自動全屏播放。如下圖解決方法監聽屏幕全屏事件中手動設置的值為。
本文包含前兩天,美團推出的楊洋H5火爆朋友圈。里面主要的是多段視頻播放、暫停。
聽起來很簡單,但是由于騰訊白名單限制,在微信瀏覽器,qq瀏覽器,會自動將video標簽中非騰訊域名的視頻 ,自動全屏,結尾追加視頻推薦。并且白名單申請入口已經關閉。
全屏適配播放 并在視頻上放置其他元素。例如下載按鈕。
蘋果手機 嵌入視頻小窗播放。
目前替換幾種解決方案的實測。
上傳至騰訊視頻(實測已經不行)
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(); }) //進入全屏 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; }詳細解讀 屬性
auto 頁面加載后載入整個數據
meta 頁面加載后載入元數據
none 不載入視頻
小窗播放 使視頻不脫離文本流,但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,結果就是蘋果支持,安卓不支持。安卓會自動全屏播放。
字面意思 容許airplay (通過AirPlay可以把當前的視頻投放到支持此技術的其他設備上。)
如果是 video 標簽,可以通過 x-webkit-airplay="allow" 屬性開啟;
如果是 embed 標簽,可以通過 airplay="allow" 屬性開啟。
建議看官網文檔非常詳細 。十分重要必看。
填充尺寸 詳情
方法setTimeout(function () { video.play(); }, 1000); //微信webview全局內嵌,WeixinJSBridgeReady方法 document.addEventListener("WeixinJSBridgeReady", function (){ video.play(); video.pause(); }, false); //誘導用戶觸摸 video.addEventListener("touchstart", function () { video.play(); });
除ended,timeupdate其他事件慎用
video.addEventListener("timeupdate",function (){ //當視頻的currentTime大于0.1時表示黑屏時間已過,已有視頻畫面,可以移除浮層(.pagestart的div元素) if ( !video.isPlayed && this.currentTime>0.1 ){ $(".pagestart").fadeOut(500); video.isPlayed = !0; } })框架中使用 react中使用
因我們實現h5播放效果,需要在video上設置屬性。但我們知道react自定義屬性,需要添加data-前綴。使得生成的節點屬性 并不是 x5要求的屬性。造成失效。
componentDidMount: function() { var element = ReactDOM.findDOMNode(this.refs.test); element.setAttribute("custom-attribute", "some value"); }
See https://jsfiddle.net/peterjma...
自定義屬性將會被原生支持在React 16,這個在RC版本中的特性,以及即將被公布。這意味著,加入自定義屬性在元素中將會非常簡單:
render() { return ( ); }
ref={(node) => { if(node){node.setAttribute("xmlns:xlink", "w3.org/1999/xlink")} }}vue中使用
直接放在template中就可以了
可能遇到的問題(坑)
安卓手機中全屏播放視頻,在左右會出現大概一像素的邊線暴露,不能完全覆蓋屏幕。如下圖
解決方法:監聽屏幕全屏事件中( video.addEventListener) 手動設置video 的left值為 0。
問題圖 | |
---|---|
https://github.com/gnipbao/ib...
https://x5.tencent.com/tbs/gu...
http://zhaoda.net/2014/10/30/...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/11024.html
摘要:但目前白名單申請途徑已經關閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機自動全屏以及視頻播放完畢會跳出廣告的問題,并且可以實現交互。 本文在H5動效的常見制作手法的基礎上,對相印的H5動效制作手法進行了擴展和整理,并結合案例談談怎么將其做得生動。 視頻類 1、體驗案例 視頻類h5可以帶給用戶動效逼真,流暢的體驗。雖然說制作視頻的難度較大,但是瑕不掩瑜,一支視頻可以盡可能地創造出...
閱讀 2422·2019-08-29 13:53
閱讀 2506·2019-08-29 11:32
閱讀 3046·2019-08-28 17:51
閱讀 3775·2019-08-26 10:45
閱讀 3490·2019-08-23 17:51
閱讀 2982·2019-08-23 16:56
閱讀 3335·2019-08-23 16:25
閱讀 3085·2019-08-23 14:15