vue3使用render函数创建video元素实例（2024-06-19）

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量117 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hap1994/article/details/139804258
版权 
render (row) {
   return h(
     'video',
      {
          style: { width: '152px', height: '85px', borderRadius: '3px', },
          autoPlay: '',
          loop: '',
          onClick: () => handleVideoPlay(1, row)
       },
       [
          h('source', { src: map4, type: 'video/mp4' }),
          h('source', { src: map4, type: 'video/ogg' })
       ]
   )
}


function handleVideoPlay(){
}

示例

宝子卡粉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue使用video插件vue-video-player的示例
10-14
下面将详细介绍如何在 Vue 项目中使用 vue-video-player 插件。 首先，要在项目中安装 vue-video-player，可以通过 npm 安装工具来完成。在命令行中输入以下命令： ```bash npm install vue-video-player --save `...
Vue中render函数的使用方法
12-29
什么情况下适合使用render函数 在一次封装一套通用按钮组件的工作中，按钮有四个样式(default success error )。首先，你可能会想到如下实现 <div v-if=type>success <div v-else-if=type>error <div v-else...
Video.js组件在Vue项目中的综合使用详解（多个视频+倍速播放）
qq_40896145的博客
04-21 9350
Video.js —— 一款开源且功能丰富的web视频组件 Video.js在Vue项目中的综合使用详解（多个视频+倍速播放） 开发中，使用video标签自带的属性难以达到我们实际所需要的效果；例如视频的倍速播放功能，利用原生代码重写一个视频标签又太过于繁琐（PS:主要是懒）。在这里，向大家推荐一款很好用的组件video.js，这是一个开源的web视频组件([video.js官网](https://videojs.com/))，其使用基于html5的video标签，同时支持HTML和Flash视频，下面向大
[Vue+NodeJS] 解决动态创建video播放不出本地视频的问题
H_O_W_E的专栏
12-22 2864
[Vue+NodeJS] 解决动态创建video播放不出本地视频的问题 事由： 如果写死了一个video设置了src值，可以正常播放，比如<video src="../assets/1.mp4"></video> 但是当用JS动态创建video元素，设置src值，却播放不出来。 原因： 路径问题导致的， 解决： 要用require()来解决，就是这个路径用require()括起来 比如 var myVideo = document.getElementById(.
Vue集成视频播放
weixin_50117748的博客
09-15 1072
Vue集成vue-video-player、video.js的视频播放
VUE动态绑定video的src不能播放
t595981879的博客
09-28 2万+
VUE的$refs特性:https://cn.vuejs.org/v2/api/#ref 给video绑定个ref值 &lt;video ref='video' controls&gt; 您的浏览器不支持 video元素。 &lt;/video&gt; 在需要动态绑定的方法里用$refs动态设置src this.$refs.video.src = res.data.video_ur...
VUE动态绑定video或者audio的src不能播放
WWW_share8的博客
01-18 3717
首先 关于vue 是可以直接通过绑定src来或者 显示在，网上的许多方法都是创建dom元素来重新 append到页面上 ，这个是能解决问题的 但不是最佳的 首先 你的html写成这样 <video ref='video' controls width="100%" height="100%"></video> 注意这里的 的ref 这里是后面方便操作 do...
Vue Render函数创建DOM节点代码实例
10-15
在上述代码实例中，我们可以看到如何使用 `createElement` 创建DOM元素： 1. **属性传递**：`createElement` 接受一个标签名（如 `'ul'` 或 `'li'`）以及一个对象，这个对象包含了组件的属性。例如，当创建一个输入...
何时/使用 Vue3 render 函数的教程详解
10-15
主要介绍了何时/使用 Vue3 render 函数的教程详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
详解vue-video-player使用心得（兼容m3u8）
10-16
主要介绍了详解vue-video-player使用心得（兼容m3u8），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 使用 video 标签实现视频播放
热门推荐
BradyCC的博客
05-29 5万+
项目需求：动态显示视频滚动条、禁止视频下载、播放时每5s更新当前时长、每10分钟暂时视频显示提示。 之前做视频播放时基本都是使用 vue-video-player 组件，其原因为 封装功能齐全、播放源兼容性好等。 通过这次项目需求，也深入的学习了 video 标签的属性及方法。具体在这里跟大家分享一下。 具体使用方法如下 <template> <!-- Video组件 --> <div id="common-video" class="h-100"> .
vue动态更新video
梨子社区
05-26 485
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <div id="app"> <video ref="video" :src="url" style="width: 200px; height: 300px;" controls></video> <button @clic.
Vue动态赋值video视频
明知山
10-19 2477
<video id="myvideo" ref="video" controls autoplay webkit-playsinline playsinline x5-playsinline @play="getplay()" ></video>...
基于VUE设置video标签
黑白两客
04-28 1万+
<template> <div> <div class="video_box"> <div class="video_center"> <div class="resource-container" style="width:70%;position:relative;"> <div class="video-title">1233123<
vue 视频播放列表 动态创建组件
weixin_34378969的博客
03-13 2673
为什么80%的码农都做不了架构师？>>> ...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 403
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
vue 使用 vue-video-playe 实例
07-10
对于Vue中使用vue-video-player的实例，你需要先安装vue-video-player插件。可以通过npm或者yarn进行安装： 使用npm： ``` npm install vue-video-player --save ``` 使用yarn： ``` yarn add vue-video-player ``` 安装完成后，在你的Vue组件中引入vue-video-player并注册： ```javascript import Vue from 'vue'; import VideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; // 引入video.js的样式文件 import 'vue-video-player/src/custom-theme.css'; // 引入vue-video-player的样式文件 Vue.use(VideoPlayer); export default { // 组件的其他配置 } ``` 然后，你可以在模板中使用vue-video-player组件来播放视频： ```html <template> <div> <video-player :options="playerOptions" :playsinline="true"></video-player> </div> </template> <script> export default { data() { return { playerOptions: { autoplay: false, controls: true, sources: [{ src: 'your-video-url', type: 'video/mp4' }] } } } } </script> ``` 在上面的示例中，你可以根据需要调整播放器的选项，并将`your-video-url`替换为你要播放的视频的URL。 这样，你就可以在Vue中使用vue-video-player来实现视频播放了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值