微信小程序video自定义播放与暂停按钮

微信小程序video自定义播放与暂停按钮,第1张

官网: https://developers.weixin.qq.com/miniprogram/dev/component/video.html

相关API:wx.createVideoContext(string id, Object this)

controls:是否显示默认播放控件(播放/暂停按钮、播放进度、时间)

muted:是否静音

show-play-btn:是否显示视频底部控氏隐制栏的播放按钮

show-center-play-btn:是否显示视频中间的播放按钮祥枝

show-mute-btn:是否显示静音按钮

事歼宴厅件:

bindended:当播放到末尾时触发 ended 事件

接口:

wx.createVideoContext(string id, Object this)

https://gitee.com/susuhhhhhh/wxmini_demo

当 video 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

 <video

              style="width:500pxheight:100%"厅梁

              controls="controls"

              扮差运autoplay

  庆袜            poster="视频未加载时封面图片"

              id="video"

   ></video>

//全屏按钮

video::-webkit-media-controls-fullscreen-button{

display: none

    }

    //播放按钮

video::-webkit-media-controls-play-button{

display: none

    }

    //进度条

video::-webkit-media-controls-timeline{

display: none

    }

    //观看的当前时间

video::-webkit-media-controls-current-time-display{

display: none

    }

    //剩余时间

video::-webkit-media-controls-time-remaining-display{

display: none

    }

    //音量按钮

video::-webkit-media-controls-mute-button{

display: none

    }

video::-webkit-media-controls-toggle-closed-captions-button{

display: none

    }

    //音量的控制条

video::-webkit-media-controls-volume-slider{

display: none

    }

    //所有控件

video::-webkit-media-controls-enclosure{

display: none

    }

html5为你的网页添加视频播放器

在html5中通过video标签为网页添加视频播放功能。

video元素支持三种视频格式:ogg,mpeg4,webm

Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件

MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件

WebM=带有VP8视频编码和Vorbis音频编码的WebM文件

以下是video标签的相关属性。

autoplayautoplay如果出现该属性,则视频在就绪后马上播放。

controlscontrols如果出现该属性,则向用户显示控件,比如播放祥余者按钮。

heightpixels设置视频播放器的高度。

looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。

preloadpreload如果出现该属性,谨薯则视频在页面加载时进行加载,并预备播毁棚放。如果使用"autoplay",则忽略该属性。

srcurl要播放的视频的URL。

widthpixels设置视频播放器的宽度。下面是一个小实例:

<!DOVTYPEhtml>

<html>

<head>

<title>我爱学习</title>

</head>

<body>

<videocontrols="controls">

<sourcesrc="song.ogg"type="audio/ogg">

<sourcesrc="song.mp3"type="audio/mpeg">

Yourbrowserdoesnotsupporttheaudiotag.

</video>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11976483.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存