此外,如果你使用的是Vue与video.js的集成,如[@2@]中所示,你可以在Vue组件的playerOptions中添加相应的配置来隐藏进度条: javascript new Vue({ el: '#vueapp', data() { return { message: 'Hi from Vue', playerOptions: { // 其他配置... controlBar: { pr
编辑 我发现 controlBar: { playToggle: false } 隐藏播放按钮。 但我仍然找到一种方法来制作只读/禁用进度条。 知道怎么做吗? 我的代码看起来像这个片段: Vue.use(VueVideoPlayer) new Vue({ el: '#vueapp', data() { return { message: 'Hi from Vue', // videojs options playerOptions: { height...
controlBar.el().appendChild(X.el()); }); 调用的时候,参数要加上插件的名称: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 var player = videojs("example_video_1", { plugins : { PowerOff : {} } }, function(){ }); 给插件按钮加样式,显示到合适的位置 代码语言:javascript 代码运行...
// controlBar: { // 配置控制栏 // timeDivider: false, // 时间分割线 // durationDisplay: false, // 总时间 // progressControl: true, // 进度条 // customControlSpacer: true, // 未知 // fullscreenToggle: true // 全屏 // }, }, myPlayer:'' } }, mounted:function () { //切换...
controlBar: { timeDivider:false, durationDisplay:false }, flash: { hls: { withCredentials:false}}, html5: { hls: { withCredentials:false}}, poster:"path-to/static/images/surmon-5.jpg" } } }, methods: { playerReadied(player) {
this.myPlayer[i] = this.$video( this.ids[i], //每个video标签对应的id { controls: true, autoplay: false, preload: false, fluid: true, // 自适应宽高 controlBar: { // 设置控制条组件 currentTimeDisplay: true, timeDivider: true, ...
controlBar: { volumePanel: { inline: false// 将音量横向改为纵向 } } }) this.player.markers({ markerStyle: { // 标记样式 width: '0.7em', height: '0.7em', bottom: '-0.15em', 'border-radius': '50%', 'background-color': 'orange', ...
提示,每次节点切换的时候要清空playerlist,同时初始化下空的数据。 效果图如下: 附具体的代码: html部分: <divclass="disassemblyVideo-content-video-screen"><video:id="'myVideo'+item.id"class="video-js vjs-big-play-centered"ref="videoRef"><source:src="urlPrefix+item.videoSource"type="video/mp4...
player.load(data);//动态切换posterplayer.posterImage.setSrc('xxx.jpg'); player.play();//销毁videojs//player.dispose(); 设置语言(传统开发,VUE开发) 传统开发 <script src="//example.com/path/to/lang/es.js"></script> <script src="//example.com/path/to/lang/zh-CN.js"></script> ...
这里的全屏并不是常规的手机横屏那种全屏,而是类似于一个modal弹窗的全屏,解决办法就是在video标签中添加 webkit-playsinline="true" playsinline="true" class="video-js vjs-big-play-centered vjs-fluid"> 8、未解决的问题例如,要禁用全屏控件:videojs('my-player', { controlBar: { fullscreenToggle: false...