Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >Video.js中的自定义组件

问Video.js中的自定义组件
EN

Stack Overflow用户

提问于 2018-12-06 15:18:44

回答 1查看 613关注 0票数 0

我正在试着用自定义控件制作视频拼图。我的代码如下：

var video = videojs(video.id, {
    controls: true,
    autoplay: false,
    controlBar: {
        children: [
            ...
        ]
    }
});

它生成DOM的方式如下：

<div class="video-js">
    <video></video>
    <div class="vjs-poster"></div>
    <div class="vjs-text-track-display"></div>
    <div class="vjs-loading-spinner"></div>
    <button class="vjs-big-play-button"></button>
    <div class="vjs-control-bar"></div>
    <div class="vjs-error-display"></div>
    <div class="vjs-modal-dialog"></div>    
</div>

在<video></video>和<div class="vjs-poster"></div>之间，我想要自定义div，例如<div class="overlay"></div>。

有没有可能使用video.js组件来实现呢？或者我必须使用Element.insertAdjacentHTML()？我读过video.js文档，我认为有可能做到这一点，但我不知道怎么做。毫无办法。

EN

回答 1

Stack Overflow用户

发布于 2019-05-21 00:17:02

我写了一些东西，解释了如何巧妙地向Video.js添加自定义组件，这可能会让人很困惑

希望这能有所帮助！

https://nikushx.com/blog/2019/05/21/creating-custom-components-with-video-js/

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53654493

复制

相关文章

Vue页面中引用自定义组件

components element ui

比如我想引用一个外部的头部导航的组件，因为这个导航在很多地方都用到，避免每个页面都写一遍首先我先在components这里创建一个navmenu的组件

明知山

2020/09/03

1.4K0

Vue组件的操作-自定义组件，动态组件，递归组件

编程算法网站

创建双向数据绑定，v-model指令用来在input，select，checkbox，radio等表单控件。v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件。

达达前端

2019/12/20

2.1K0

html javascript iphone 网站 ios

> 一、总结（点击显示或隐藏总结内容）一句话总结：网上有各种细致的现成的代码可以拿来用，没必要自己死专 1、video.js有两种初始化方式？一种是在video的html标签之中一种是使用j

kirin

2020/06/22

31.5K0

微信小程序中自定义组件的使用

在开发过程中，加入有这样一种场景，就是在开发的过程中，我们一直要使用一些相同或者类似的结构，我们就可以自定义模块，方便使用，以及后期的维护，了解vue的同学就知道，其中此方法类似vue中的插槽（slot）；

天天_哥

2018/09/29

9450

vue的自定义组件

<template> <div id="app"> <div v-blue="color">vue3。0</div> </div> </template> <script> import Vue from "vue"; Vue.directive("blues", function(el, binding) { /// blues就是组件的名称 // 把data中的color 通过binding来获得，同时el.style就是设置css属性 el.style = "color:

用户4344670

2019/11/04

7040

【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )

flutter 变量博客继承注解

Flutter 开发中 , 组件可以是一个 Button 按钮 , Text 文本 , 也可以是封装好的一大块区域 ; 组件由 Widget 组成 ;

韩曙亮

2023/03/29

1.9K0

【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )

videojs播放器插件使用详解

javascript 数据结构编程算法云点播 html

HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Live Streaming，可支持流媒体的直播和点播，主要应用在 iOS 系统，为 iOS 设备（如 iPhone、iPad）提供音视频直播和点播方案。

菲宇

2020/04/16

53.3K2

Vue自定义组件-动态组件

<template> <div class="page-list"> <span class="list-txt">{{ title }}</span> <!-- <ex-btn v-if="current == 'ex-btn'" v-on:myClick="myClick" :msg="msg" ></ex-btn> <ex-btn2 v-else v-on:myClick="myClick" :msg="msg"> <

苦咖啡

2019/12/11

1.1K0

微信小程序中自定义组件solt的使用

微信小程序 xml

我们会发现，在自定义模板中有一对<code><slot></slot></code>,这里是干什么用的呢？在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

天天_哥

2018/09/29

6.2K0

自定义事件在 Vue.js 组件中的应用

input model native 事件

Vue.js 组件的自定义事件可以让子组件向父组件传递数据，非常方便实用。在使用自定义事件时，我们可以使用 v-on 来绑定事件，每个 Vue 实例都实现了事件接口，即使用 $on(eventName) 监听事件和使用 $emit(eventName) 触发事件。此外，在父组件中，我们可以使用 v-on 来监听子组件触发的事件。

iOS程序应用

2023/03/15

4K0

自定义事件在 Vue.js 组件中的应用

Video.js简单使用

java javascript

今天项目中需要跨浏览器地播放视频，在网上找了一下，找到了video.js，记录一下video.js的简单用法。 <html> <head> ...  <link rel="stylesheet" type="text/css" href="css/video-js.css" /> ...  <script type="text/javascript"> document.createE

jeremyxu

2018/05/09

17.1K0

小程序-实现自定义组件以及自定义组件间的通信

小程序微信数据库一体机 TData

对于组件的封装,在小程序当中对于多个页面的复用有着重要的作用,小程序中注册的每个页面都是独立的

itclanCoder

2020/11/09

2.7K0

小程序-实现自定义组件以及自定义组件间的通信

【Android 内存优化】自定义组件长图组件 ( 自定义组件构造方法 )

android 布局对象内存优化

在代码中创建 View 对象 , 就会调用该构造函数 , 其中 Context context 参数是组件运行的环境 , 可以从该 Context 对象中获取当前的主题 , 资源等 ;

韩曙亮

2023/03/27

7980

Vue组件的自定义事件

click dom native ref 事件

click,keyup,mouseover等都属于原生js事件，自定义事件指事件名称为自定义。

全栈开发日记

2022/05/13

1.7K0

自定义admin组件

编程算法 python html php

1 新建一个项目，创建一个app01和stark应用，stark创建一个service包，并在service下创建stark.py。然后注册app

py3study

2020/01/16

1.6K0

自定义组件——ModuleView

ModuleView是一个模快化的View。可以快速搭建一个常用的模块页面，显示不同模块的数据内容。它的难点在于解决ScrollView与RecyclerView的会出现的各种冲突。最容易遇到的就是RecyclerView不显示。 ModuleView拥有自己得ModuleViewAdapter，ModuleViewBean，ModuleViewHolder比较容易理解，因为内部嵌入了RecyclerView。

饮水思源为名

2018/09/06

9810

自定义组件——ModuleView

Vuejs中slot实现自定义组件header、footer等

vue中的slot主要负责内容分发，之前有介绍过slot的内容，具体链接：http://www.cnblogs.com/vipzhou/p/6640056.html，这节主要模拟下一些ui组件比如iview等一般会为组件添加一些slot属性，这些slot如果外部指定的话，会显示指定的，不指定的话则会展示默认的slot，具体实现可以参考如下，主要是掌握下默认slot插槽内容的写法：

用户1141560

2018/07/31

2K0

Vue自定义组件

prop 是父组件用来传递数据的一个自定义属性（通过 props 把数据传给子组件）

Leophen

2019/08/23

1.1K0

flutter自定义组件

如何用canvas绘制我们任何想要任意图案的组件，这篇文章用自定义一个五角星组件来说明

韦东锏

2022/04/11

5510

自定义Processor组件

现在我们要自定义一个Processor，假设它叫MyProcessor.java，那么这个Java文件写在哪里呢？

@阿诚

2020/09/01

1.8K0

相似问题

Video.js组件

12

无法在react-loadable中包装video.js组件

17

如何在video.js上添加新组件(按钮)？

26

在rails中使用Vue组件(使用video.js)发出

11

(在Video.js中)如何设置自定义请求头？

10

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例