180-0680-8820

紹興云遠網絡熱線
首頁 >> 小程序 >>小程序專業知識 >> 等了這么久,用小程序看視頻終于更順滑了-紹興云遠網絡有限公司為你實時播報
详细内容

等了這么久,用小程序看視頻終于更順滑了-紹興云遠網絡有限公司為你實時播報

image.png


你在用小程序看視頻的時候,遇到過這樣的問題嗎?


要么在視頻上點擊分享等按鈕后,視頻播放突然異常卡頓;

要么按鈕與視頻完全不在同一頁,十分“割裂”;

要么根本就找不到這些按鈕;

……


小程序之所以在視頻的體驗上遇到這些問題,是因為分享等按鈕與視頻并不在同一層,兩者不能同步渲染,因此,也就不能在視頻播放的同時直接操作其他功能。


現在,微信上線了“突破性”的交互方式,用戶可以點擊“懸浮”在視頻播放頁上的按鈕,而不影響視頻流暢播放,甚至就像“畫中畫”一樣,從而實現了“即看即點”。


而這背后最大的功臣,便是「video同層渲染」能力。


那么,「video同層渲染」能力是如何實現“即看即點”的呢?本期《小程序說·能力百科全書》,我們請來快手短視頻糖豆視頻小打卡等。看看他們是如何利用這一能力在視頻互動上大展身手,從而提升用戶留存的。



1

快手


提升“老鐵”體驗,帶來更多商業價值


“雙擊666!感謝老鐵送的火箭!


不用說,你肯定知道這句話是來自快手短視頻尷尬的是,當用戶在小程序上瀏覽短視頻或直播的時候,這些功能卻玩不了。


這一問題確實給快手小程序團隊帶來不少煩惱,畢竟,沒有“老鐵文化”,就不叫快手了。“之前,覆蓋在視頻上面的點贊、送禮物等按鈕,都會導致頁面卡頓、動畫效果不能實現等”,快手小程序前端負責人宋長安告訴我們。


當時,快手的第一版解決方案是,把這些按鈕放在視頻下方,從而避免與視頻重合,雖然會有一定的割裂感,但也只能如此。


上線「video同層渲染」能力之后,它可以實現視頻上“懸浮”的按鈕與視頻同步渲染,也就不會出現以上所提到的“畫面卡頓問題”。點贊、分享、送禮物等功能更沉浸式,復雜動畫效果也有了,“雙擊666”也終于回來了。


6.png

點擊圖片可跳轉小程序


另外,相較于此前的“割裂感”,現在體驗上也好很多,尤其是沉浸式的體驗會讓用戶產生一種使用獨立App的“錯覺”。


操作成本降低和體驗優化之后,用戶留存自然也就會有很大提升。“雖然快手小程序才剛剛接入這個能力,但在留存上,我們預期會帶來5%以上的增幅”,宋長安肯定地和我們說。


當然,不僅是在短視頻體驗上,在快手核心業務——直播上,「video同層渲染」也能起到很好的效果。比如,可以做更多酷炫好玩、聲臨其境的送禮物動畫效果,引導用戶充值和送禮,帶來商業變現價值。


在快手看來,正是有了這一能力,這些“懸浮”在視頻上的按鈕就能與視頻本身同時渲染,從而不影響視頻播放。因此,未來就可以做更多商業上的探索,比如推送企業廣告、主播在直播間上添加商品等。



2

糖豆視頻


視頻播放量“直線”上升的秘密


只要有“廣場”的地方,就一定有廣場舞。


現在,小程序上也有廣場舞了,糖豆視頻就是這樣一款廣場舞分享教學的小程序。


在前段時間,他們遇到了一個問題,愛跳廣場舞的阿姨看到好玩有趣的跳舞視頻,卻總也找不到分享與收藏的按鈕,無法分享給自己的好姐妹。


“碰到這一問題,我們嘗試過把分享、收藏這些按鈕放在視頻播放頁上。但由于它們是兩層的,沒法同步渲染,視頻播放就會變得非常卡頓,體驗特別不好”。糖豆小程序業務負責人周濤告訴我們,“所以,也是不得已才將這些按鈕與視頻分開,放在了視頻下方。


image.png

點擊圖片可跳轉小程序


「video同層渲染」能力的上線,解救了廣場舞阿姨們。


具體來說,這一能力可以實現視頻播放時的“懸浮”按鈕與視頻同步渲染,用戶可以在視頻上直接點擊分享或收藏,視頻播放也不受影響。而且,視頻也就可以“放心地”全屏展示了,視覺效果也好很多。


“我們目前仍處于小范圍內測階段,接入「video同層渲染」后,這部分內測用戶的人均視頻播放數從2.9提升到了4.5。”周濤開心地告訴我們。


有了這項能力,糖豆視頻還推出了一些好玩的功能。比如,用戶直接上傳照片就可以快速生成視頻,這對于年長的用戶來說,十分實用;還可以直接在視頻播放頁添加商品,用戶可以邊看視頻邊買舞蹈老師推薦的商品,也獲得了更多商業化的可能。



3

小打卡


讓視頻也能打卡,讓工具更有趣


「video同層渲染」能力幫我們實現了內容的閉環。小打卡創始人徐佳義說。


在小打卡上,越來越多的用戶習慣用視頻來記錄生活,但是直接播放用戶上傳的視頻會很單調,比如美食健身、手工手帳、練字繪畫、學吉他鋼琴的過程等等,就需要更多趣味性的東西。


“用戶有這個需求,我們之前也嘗試過一些辦法,比如在視頻上加一些貼圖效果,但由于視頻與貼圖不能同步渲染,所以效果和體驗都特別不好”,徐佳義之前一直在愁這個問題,“這樣也就降低了用戶發布視頻的欲望。


接入「video同層渲染」這項能力之后,在視頻上添加的貼紙、相框等效果就可以和視頻同步渲染了,而且這些效果還能動起來,所以體驗上就會好很多,用戶發視頻的時候也就沒那么枯燥了。


image.png

點擊圖片可跳轉小程序


借助這個能力,小打卡還做了很多有趣的玩法。比如,在視頻播放時雙擊點贊、評論通過彈幕的方式在視頻播放頁展示出來,以及在視頻中添加“問答”的玩法來拓展與用戶的互動方式等等


“視頻有了更好的展現效果、互動性、趣味性,也就會有更多用戶點擊觀看與互動,從而反向促使用戶去創造更多優質內容,所以,這個能力是幫助我們實現了內容閉環”徐佳義說。


當然,在用戶留存的提升上,這項功能也確實為小打卡帶來不小的優化,比如,在用戶瀏覽視頻停留時長上,就有了一倍以上的增長



Tips

給開發者的一些建議



·「video同層渲染」目前存在一些兼容性問題,所以需要在組件中進行版本判斷(2.4.0+),輸出對應的方案,使用的時候可以關注下用戶的基礎庫版本;


· 切換視頻的時候,容易出現黑屏問題,原因是切換至下一個視頻的時候,有一段緩沖的等待時間。所以,需要設置視頻的預加載


· 在不影響用戶體驗的情況下,盡可能的壓縮媒體資源文件,因為它最容易消耗內存。


本期《小程序說·能力百科全書》介紹的「video同層渲染」能力,大家看過之后都有哪些啟發?歡迎留言或進入社區與我們交流。需要接入的話,請參考《開發文檔》


當然,如果你有在能力運用上的新想法、案例,或者數據,以及開發過程中遇到的疑問,都可以通過填寫下方問卷與我們聯系。



點擊填寫問卷


往期推薦

  • 电话直呼

    • 18006808820
    • 13989500275
    • 銷售總監 :
    • 銷售經理 :
    • 客服 :
  • 掃一掃,加微信,及時溝

技术支持: 杭州云遠科技有限公司 | 管理登录
16岁周末打字赚钱