我们可以根据这些状态变化,相应的改变我们的UI,比如播放时显示“暂停”按钮,暂停时显示“播放”等功能。 2.播放进度,剩余时间,音量调节 播放进度的话是根据在播放器onPlayerTimeupdate()回调方法中,通过currentTime这个方法来获取当前播放的进度时间,单位S,因为这里我使用的是slider,进度都是整数计算,所以这里我需要两个...
控制播放和暂停 this.$refs.videoPlayer.player.play()//播放this.$refs.videoPlayer.player.pause()//暂停this.$refs.videoPlayer.player.src(src)//重置进度条 回调函数 <template> <divclass='demo'> <video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playe...
controlBar: {timeDivider:false,durationDisplay:false,remainingTimeDisplay:false,currentTimeDisplay:false,// 当前时间volumeControl:false,// 声音控制键playToggle:false,// 暂停和播放键progressControl:false,// 进度条fullscreenToggle:true// 全屏按钮},techOrder: ['flash'],// 兼容顺序flash: {hls: {withC...
1.htmlplaysinline不希望用户来拖动进度条 2.js export default{data(){return{playerOptions:{playbackRates:[0.5,1.0,1.5,2.0],// 可选的播放速度autoplay:false,// 如果为true,浏览器准备好时开始回放。muted:false,// 默认情况下将会消除任何音频。loop:false,// 是否视频一结束就重新开始。preload:'auto'...
progressControl: true, // 进度条 remainingTimeDisplay: true, //当前以播放时间 fullscreenToggle: true, //全屏按钮 pictureInPictureToggle: true, //画中画 } }, function() { this.on('error', function(err) { //请求数据时遇到错误 console.log("请求数据时遇到错误",err) ...
//是否显示剩余时间功能fullscreenToggle:true,//全屏按钮playToggle:true,//播放暂停按钮volumeMenuButton:true,//音量控制currentTimeDisplay:true,//当前播放时间progressControl:true,//点播流时,播放进度条,seek控制liveDisplay:true,//直播流时,显示LIVEplaybackRateMenuButton:true,//播放速率,当前只有html5模式下...
3、控制播放和暂停 this.$refs.videoPlayer.player.play() // 播放 this.$refs.videoPlayer.player.pause() // 暂停 this.$refs.videoPlayer.player.src(src) // 重置进度条复制代码 this.playerOptions.sources[0].src = 'vue-mobile/media/sh.mp4'; // 视频地址 ...
import 'vue-video-player/src/custom-theme.css'export default { components: { videoPlayer } } 3、控制播放和暂停 this.$refs.videoPlayer.player.play() // 播放 this.$refs.videoPlayer.player.pause() // 暂停 this.$refs.videoPlayer.player.src(src) // 重置进度条复制代码 this.playerOptions...
2.控制函数 this.options['sources'][0]['src'] = '接口地址'; //重新赋值视频地址 this.$refs.videoPlayer.player.play() // 播放 this.$refs.videoPlayer.player.pause() // 暂停 this.$refs.videoPlayer.player.src(src) // 重置进度条
基于vue-video-player自定义播放器的方法 基于vue-video-player⾃定义播放器的⽅法⽬录 写在前⾯ ⼀、外层ui布局 ⼆、播放器ui 三、实现⾃定义controlBar功能 四：总结 先看⼀下效果。图1--显⽰侧边栏 图2-收起侧边栏；图三：全屏。