小程序的video控件如何使用

這篇文章主要介紹“小程序的video控件如何使用”，在日常操作中，相信很多人在小程序的video控件如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”小程序的video控件如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　一、屬性

　　| 屬性名 | 類型 | 默認值 | 說明 | 最低版本 |

　　|——–|——–|——–|——–|——–|

　　| src | String| | 要播放視頻的資源地址 | |

　　| initial-time| String | | 指定視頻初始播放位置| 1.6.0 |

　　| duration |Number|| 指定視頻時長 | 1.1.0 |

　　| controls |Boolean |true| 是否顯示默認播放控件(播放/暫停按鈕、播放進度、時間)| |

　　| danmu-list |Object Array||彈幕列表 | |

　　| danmu-btn |Boolean|false | 是否顯示彈幕按鈕，只在初始化時有效，不能動態變更| |

　　| enable-danmu |Boolean|false| 是否展示彈幕，只在初始化時有效，不能動態變更 | |

　　|autoplay|Boolean|false|是否自動播放| |

　　|loop|Boolean|false|是否循環播放| 1.4.0 |

　　|muted|Boolean|false|是否靜音播放| 1.4.0 |

　　|page-gesture|Boolean|false|在非全屏模式下，是否開啟亮度與音量調節手勢|1.6.0 |

　　|direction|Number||設置全屏時視頻的方向，不指定則根據寬高比自動判斷。有效值為 0(正常豎向), 90(屏幕逆時針90度), -90(屏幕順時針90度)|1.7.0|

　　|bindplay|EventHandle||當開始/繼續播放時觸發play事件| |

　　|bindpause|EventHandle||當暫停播放時觸發 pause 事件| |

　　|bindended|EventHandle||當播放到末尾時觸發 ended 事件| |

　　|bindtimeupdate|EventHandle||播放進度變化時觸發，event.detail = {currentTime, duration} 。觸發頻率 250ms 一次| |

　　|bindfullscreenchange|EventHandle||當視頻進入和退出全屏是觸發，event.detail = {fullScreen, direction}，direction取為 vertical 或 horizontal| |

　　|objectFit|String|contain|當視頻大小與 video 容器大小不一致時，視頻的表現形式。contain：包含，fill：填充，cover：覆蓋| 1.4.0|

　　|poster|String||視頻封面的圖片網絡資源地址，如果 controls 屬性值為 false 則設置 poster 無效| |

　　||||||

　　video 組件 默認寬度300px、高度225px，可通過wxss設置寬高。

　　三、相關實現api

　　1、wx.createVideoContext

　　創建并返回 video 上下文 videoContext 對象。在自定義組件下，第二個參數傳入組件實例this，以操作組件內 video 組件

　　2、videoContext對象

　　videoContext 通過 videoId 跟一個 video 組件綁定，通過它可以操作一個 video 組件。

　　videoContext 對象的方法列表：

　　| 方法 | 參數 | 說明 | 最低版本 |

　　|——–|——–|——–|——–|

　　|play | 無| 播放 | |

　　|pause| 無| 暫停 | |

　　|seek | position| 跳轉到指定位置，單位 s| |

　　|sendDanmu|danmu|發送彈幕，danmu 包含兩個屬性 text, color。||

　　|sendDanmu|danmu|發送彈幕，danmu 包含兩個屬性 text, color。||

　　|sendDanmu|danmu|發送彈幕，danmu 包含兩個屬性 text, color。||

　　|playbackRate|rate|設置倍速播放，支持的倍率有 0.5/0.8/1.0/1.25/1.5|1.4.0|

　　|requestFullScreen|無|進入全屏，可傳入{direction}參數(1.7.0起支持)

　　|exitFullScreen|無|退出全屏|1.4.0|

到此，關于“小程序的video控件如何使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！