小程序的video控件如何使用

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

　　一、屬性

　　| 屬性名 | 類型 | 默認(rèn)值 | 說明 | 最低版本 |

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

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

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

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

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

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

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

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

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

　　|loop|Boolean|false|是否循環(huán)播放| 1.4.0 |

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

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

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

　　|bindplay|EventHandle||當(dāng)開始/繼續(xù)播放時觸發(fā)play事件| |

　　|bindpause|EventHandle||當(dāng)暫停播放時觸發(fā) pause 事件| |

　　|bindended|EventHandle||當(dāng)播放到末尾時觸發(fā) ended 事件| |

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

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

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

　　|poster|String||視頻封面的圖片網(wǎng)絡(luò)資源地址，如果 controls 屬性值為 false 則設(shè)置 poster 無效| |

　　||||||

　　video 組件 默認(rèn)寬度300px、高度225px，可通過wxss設(shè)置寬高。

　　三、相關(guān)實現(xiàn)api

　　1、wx.createVideoContext

　　創(chuàng)建并返回 video 上下文 videoContext 對象。在自定義組件下，第二個參數(shù)傳入組件實例this，以操作組件內(nèi) video 組件

　　2、videoContext對象

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

　　videoContext 對象的方法列表：

　　| 方法 | 參數(shù) | 說明 | 最低版本 |

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

　　|play | 無| 播放 | |

　　|pause| 無| 暫停 | |

　　|seek | position| 跳轉(zhuǎn)到指定位置，單位 s| |

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

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

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

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

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

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

到此，關(guān)于“小程序的video控件如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>