video 暂停播放
时间: 2023-08-26 15:05:16 浏览: 50
要实现video的暂停播放功能,你可以通过配置video标签以及使用Vue的事件来实现。
首先,在video标签中,你需要设置ref属性来获取video所在的DOM元素,并设置src属性为视频的地址。同时,添加controls属性来显示播放控件。在播放、暂停和播放完毕时,分别使用play、pause和ended事件来改变videoIsPlay变量的值。
在Vue的data中,定义一个变量videoIsPlay,默认为false,表示视频暂停状态。
接下来,你可以使用v-on指令来监听click事件,并在事件处理函数中切换video的播放状态和图标的显示。当videoIsPlay为false时,点击图标时播放视频,并隐藏图标;当videoIsPlay为true时,点击图标时暂停视频,并显示图标。
这样,当你点击图标时,video会相应地播放或暂停,并改变videoIsPlay变量的值,从而控制图标的显示与隐藏。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [使用H5中的video标签时,页面中间显示“暂停”图标;点击播放,图标消失;点击暂停,图标出现(play、pause...](https://blog.csdn.net/weixin_42881768/article/details/118757567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]