仿抖音短視頻閱讀手冊

特殊通知

• 1.請用戶認真閱讀以下說明，千萬不能混淆頁面隨意引入，如果你發(fā)現(xiàn)運行后頁面樣式排版錯亂，大概率是引入錯誤喔。

• 2.請App端用戶將HbuilderX版本調(diào)整到3.3.9版本或3.3.9以下的版本，以規(guī)避list-cell渲染問題。

需求說明

在項目中內(nèi)置短視頻模塊

功能說明

• 1.APP端

  • 滑動視頻播放
  • 視頻播放與暫停
  • 滑動進度條
  • 預加載視頻
  • 自適應視頻封面
  • 滑動視頻小窗預覽
  • 無限加載視頻
  • 普通點贊/取消點贊
  • 雙擊屏幕點贊
  • 視頻結(jié)束自動切換下一個視頻
  • 視頻預覽列表
    • 請求加載視頻列表
    • 點擊某視頻播放某視頻
    • 視頻列表內(nèi)
      • 滑動視頻播放
      • 視頻播放與暫停
      • 預加載視頻
      • 自適應視頻封面
      • 無限加載視頻
      • 普通點贊/取消點贊
      • 側(cè)滑返回
  • 評論
    • 評論列表
      • 一級評論「含表情+GIF動圖」
      • 二級評論「含表情+GIF動圖」
      • 根據(jù)視頻作者顯示「作者」標志
      • 展開查看回復的評論
      • 根據(jù)是否是此視頻作者顯示二級評論「作者」標志
      • 根據(jù)是否是此視頻作者顯示「刪除」按鈕
      • 倒序顯示評論
      • 點贊/取消點贊
      • [??] 評論算法
    • 評論輸入框
      • 觸摸彈起
      • 點擊表情展開默認emoji表情「QQ」
      • 記住歷史輸入emoji表情「QQ」
      • 上傳自定義圖片表情
      • 點擊GIF表情顯示在評論框之下
      • 記住歷史GIF表情
      • GIF表情
        • 分頁顯示GIF表情
        • 搜索GIF表情
        • 點擊GIF表情顯示在評論框之下
        • 點擊搜索GIF彈起表情輸入框
        • 輸入GIF值顯示GIF表情，點擊表情顯示在評論框之下

• 2.微信小程序、H5端

  • 滑動視頻播放
  • 視頻播放與暫停
  • 預加載視頻
  • 自適應視頻封面
  • 無限加載視頻
  • 普通點贊/取消點贊
  • 雙擊屏幕點贊
  • 視頻結(jié)束自動切換下一個視頻
  • 視頻預覽列表
    • 請求加載視頻列表
    • 點擊某視頻播放某視頻
    • 視頻列表內(nèi)
      • 滑動視頻播放
      • 視頻播放與暫停
      • 預加載視頻
      • 自適應視頻封面
      • 無限加載視頻
      • 普通點贊/取消點贊
      • 側(cè)滑返回

注意說明

• 1.APP端

• 2.小程序/H5端

插件解決問題

• 解決App端視頻列表上下滑動、視頻自動滑動播放的難點

• 解決視頻播放前黑屏的問題

• 解決其他短視頻組件播放等待加載轉(zhuǎn)圈問題。提前加載，即滑即播

• 解決視頻串音問題

• 解決滑動問題

• 優(yōu)化視頻播放性能

• 精簡進度條代碼，高度自定義進度條樣式

測試情況

• 安卓測試機型

說明：高端機型得益于芯片，滑動流暢，其他如上說明。低端機型由于機器太老6年前的安卓手機，滑動太快的時候會卡住，但是過一會就會好。

• 蘋果測試機型

說明：高端機型得益于芯片，滑動流暢，其他如上說明。低端機型：6年前的蘋果產(chǎn)品還是夠挺，滑動只是略微卡頓。

插件歷程

• 至2023年2月1日，此插件已經(jīng)連續(xù)更新和維護19個月。

• 對于如何提升播放性能，如何做到像抖音一樣隨滑隨播，于是在github和gitee和DCloud插件市場和各個論壇，翻遍了播放插件和優(yōu)化思路，很多插件發(fā)布以后都不會再進行長期維護，作者承諾此插件免費發(fā)布，并且長期維護，感謝大家對作者工作的支持。

問題反饋

• 最有效的方式就是加 QQ 群反饋，消息及時，解決速度快。

• 評論區(qū)反饋格式如下：

(如下格式才可得到有效回復)

使用端：App[iOS\Android]（小程序、H5）
問題描述：xxxxx
其他內(nèi)容：xxxxx

（示例）

使用端：App[iOS]
問題描述：如何處理安全區(qū)高度
其他內(nèi)容：【配圖1】【配圖2】

其他說明

• 代碼注釋已經(jīng)一步一步寫在代碼旁邊了

• 插件可直接粘貼復制，不影響其他功能

• 此插件原生實現(xiàn)，沒有基于第三方原生插件，解決提前預播的難點，視頻播放性能再次得到提升。

• App端插件引入了評論，這一部分僅做參考

(App端引入)（uni-popup組件已經(jīng)被改造了）文章來源地址http://www.zghlxwxcb.cn/news/detail-605566.html

<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
    <view :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #242424; border-top-left-radius: 10px; border-top-right-radius: 10px;'">
        <!-- 
         這里就是App評論組件
         -->
        <douyin-scrollview
        :Width="windowWidth"
        :Height="(boxStyle.height/1.23)"
        :deleteIOSHeight="36"
        :deleteAndroidHeight="15"
        @closeScrollview="closeScrollview"
        ></douyin-scrollview>
    </view>
</uni-popup>

具體見：https://ext.dcloud.net.cn/plugin?id=5656

到了這里，關(guān)于uniapp - 仿抖音短視頻項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！