controls:false,//不显示暂停、声音、进度条组件loop:true,//视频一结束就重新开始。sources: [ { type:"video/mp4", src:'', }, ], }, 2、在点击预览或者播放时动态赋值url let url ="/video/video"+Math.floor((3+1-1) * Math.random() +1)+".mp4"//url地址this.playerOptions['sources'][...
后端使用 python web 框架 返回视频文件流,前端使用 vue-video-player进行播放,但是无法拖动进度条进行快进或后退 解决: importos fromfastapi.responsesimportStreamingResponse @app.get("/work/get_file/{file_name}") defdownload_files_stream(file_name:str,response:Response): ...
1.直接修改css /deep/ .vjs-progress-control{ pointer-events: none !important; } 2.js 动态修改 setTimeout(() => { let control = document.querySelectorAll('.vjs-progress-control') control.forEach(item => { item.classList.add('pointer') }) }, 1000)...
that.player = new videojs(document.getElementById('player'), { controls: true, // 是否显示控制条 poster: that.taskInfo.image, // 视频封面图地址 preload: 'auto', autoplay: false, fluid: true, // 自适应宽高 language: 'zh-CN', // 设置语言 muted: false, // 是否静音 inactivityTimeout...
import{videoPlayer}from'vue-video-player'import'video.js/dist/video-js.css'exportdefault{components:{videoPlayer}} 三、使用 1.htmlplaysinline不希望用户来拖动进度条 2.js export default{data(){return{playerOptions:{playbackRates:[0.5,1.0,1.5,2.0],// 可选的播放速度autoplay:false,// 如果为true...
4.进度保存 接下来就是 保存视频的进度条了,通过打印发现onPlayerTimeupdate可获取到视频的进度,故采用定时器 每3秒触发一次数据交互 computed: { player() {returnthis.$refs.videoPlayer.player//自定义播放} }, mounted () {this.timer = setInterval(this.putLearningObj,3000) ...
利用数据显示进度条 这里查阅相关文档修改进度条样式,相关style这里不显示了。然后对通过props接收到的值进行显示也没有问题。 相关代码如下: <template> <div class="player-content"><div class="progress-bar"> <inputtype="range"ref="progress":class="{ active: isTouch }"min="0"v-model="currentTime...
--在视频外面加一个容器--><divclass="input_video"><video-playerclass="video-player vjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"></video-player></div></template><script>exportdefault{name:'BusImg',data(){return{// 视频播放playerOptions:{playbackRates:[0.5,...
"d-player": VueDPlayer, }, data() { return { optionsPlayer: { container: this.$refs.player, //播放器容器 mutex: false, // 防止同时播放多个用户,在该用户开始播放时暂停其他用户 theme: "#b7daff", // 风格颜色,例如播放条,音量条的颜色 ...
图1--显示侧边栏 图2-收起侧边栏; 图三:全屏。 写在前面 本次项目中需要用到vue,vue-video-player,我用的是iview的ui框架,但是ui框架无妨,这里关注的是基于video.js开发的vue-video-player的使用,以及如何操作video.js中的api。 vue-video-player 项目地址:https://github.com/surmon-china/vue-video-playe...