video设置播放时间点及常用属性和方法

最新推荐文章于 2023-11-10 16:31:44 发布
VIP文章 最新推荐文章于 2023-11-10 16:31:44 发布
阅读量4.6k 收藏 5
点赞数
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milijiangjun/article/details/108738614
版权 
     <!-- top video log -->
    <div class="topshow" >
       
			<div class="topl"></div>
			<div class="topr"></div>
			<div class="topc" >
          <div class="topcl"    >  
                <div style="width: 530px; height: 300px;" >
              <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                  <source id="source" src="https://36421.long-vod.cdn.aodianyun.com/u/36421/m3u8/adaptive/694bd1238e40861c480698cdbf6ca4a9.m3u8"

                  
                  
                  
                 type="application/x-mpegURL"></source>
              </video>
          </div>
             <!--video <iframe src="http://live.eyunbo.cn/live/39041?uin=1729" style="zoom:100%"  >
最低0.47元/天 解锁文章
milijiangjun
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue控制video视频和弹幕功能
biubiubiu
01-19 7244
2020-02-19 前两天想说练一下vue，就按照bilibili写了一个demo（我第一次放这种模仿的页面，如果有哪里不合适的请告诉我哈），就写了比较核心的首页和视频播放页，包括控制视频和弹幕渲染等等的，记录一下。 目录先放一下最终效果一、vue控制视频播放1. 引入视频2. 播放 / 暂停功能3. 获取并及时更新视频时间4. 播放完成 / 重放二、弹幕功能1. 添加弹幕容器2. 弹幕...
详解Html5中video标签那些属性和方法
11-21
前言 最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛…后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src：视频的URL poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 webkit-playsinline="true" IOS下防止全屏播放 playsinline="true" 同
vue video-player获取保存和设置当前播放进度
sunshine08_07的博客
03-12 8295
html： <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ...
HTML5 Video标签的属性、方法和事件汇总介绍
11-21
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。 <video>标签的属性 复制代码代码如下:src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 html 代码 复制代码代码如下: <video id=”media” src=”https://www.jb51.net/test.mp4″
Vue + 原生JS + 原生CSS3 实现视频时间点在时间轴上的动态可视化
wantingtr的博客
02-26 6075
文章目录需求实现效果模拟后台数据实现方法数据结构htmlJS功能实现初始化点击切换关键词实现时间点可视化遇到的问题v-show 用布尔类型的数组绑定无法监听生命周期造成的对象undefined问题总结 需求 根据关键字在视频中的出现时间，在模拟的视频时间轴中显示对应的位置 用户点击，选择不同的关键字，显示对应关键词时间 点击进度条中的关键词时间点，视频对应跳转到该时间播放 实现效果 完整源...
vue-video-player的使用，实现自定义播放起点(位置)
xixi的博客
09-10 6119
所用插件vue-video-player 这是一款基于video.js的视频播放器插件 1.安装： npm install vue-video-player --save 2.全局引用， 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlaye
HTML5视频播放控制
fenglin247的博客
01-30 8084
用HTML5中的video标签播放视频，用JS控制视频的播放。
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
DarlingYL的博客
04-29 1万+
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
Vue中实现视频播放——vue-video-player、dplayer
m0_46318298的博客
08-11 2万+
2、一些常见的函数和参数使用，完整代码如下。一、vue-video-player。
vue3+ts实现视频根据时间轴截取，并可以通过传入截取起止时间进行当前剪辑的回显
wed2019的博客
09-22 3574
根据时间轴去手动设置起始时间和结束时间，控制视频的开始播放和结束播放时间
Vue视频播放（Video）
最新发布
q2724338648的博客
11-10 2914
可自定义设置以下属性：视频文件url（src），必传，默认 ''，支持网络地址https和相对地址require('...')视频封面url（poster），默认 ''，支持网络地址https和相对地址require('...')在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面（second），默认为0.5s视频播放器宽度（width），默认为800px视频播放器高度（height），默认为450px视频就绪后是否马上播放（autoplay），默认为false。
vue自定义h5video视频播放器进度条组件，可拖拽、跳转、倍速、全屏
gyw的博客
06-08 1万+
一个进度条组件控制多个视频的播放、进度调整。视频可点击全屏观看
video 试看功能 可自定义时间 两种方法
荒的博客
07-22 1276
<link href="http://vjs.zencdn.net/5.6.0/video-js.css" rel="stylesheet"> <script src="http://zln.laowushangcheng.com/static/zln/js/jquery.min.js"></script> <div class="theme-popover"> <div class="theme-poptit"> .
MPMoviePlayerController指定在线视频的开始时间
shisanshuno1的专栏
04-07 934
有小伙伴在使用MPMoviePlayerController时遇到过这样的问题，在播放本地视频时，可以随意设定开始播放时间了。但是在线的视频就控制不了了。 经过研究，在使用MPMoviePlayerController的时候，指定视频开始时间可以用以下方法来解决。 首先，设置监听视频播放的开始通知 [[NSNotificationCenter defaultCenter] a
videojs 从上次播放的时间点开始播放
ASP.NET
12-09 8972
//加载播放器[0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0] var myPlayer = videojs('my-video', { fluid: true, playbackRates: [0.5, 1.0, 1.5, 2.0] }); videojs("my-video").ready(function() { // myPlayer.poster(d...
vue获取video视频时长和当前播放进度时间，解决出现NaN或者undefined的问题
seeeeeeeeeee的博客
12-16 1万+
video标签添加canplay事件 canplay：视频准备就绪可以播放的时候触发的事件 <video src="../video/1.mp4" controls="controls" width="100%" autoplay @canplay="getVidDur()" id="myvideo" ></video> js 这里
Vue iView时间组件DatePicker，设置开始时间和结束时间约束、初始值和格式（年月日）
qq_36649922的博客
05-31 3621
html代码： <FormItem label="开始时间"> <DatePicker type="date" :options="startOption" v-model="createForm.startDate" ></DatePicker> </FormItem> <FormItem label="结束时间"> <DatePicker
Vue2视频播放（Video）
热门推荐
Mr Dear的博客
10-10 3万+
Vue2简易封装的视频播放组件
vue-video-player属性及方法
11-03
vue-video-player是一个Vue.js的视频播放器插件，它提供了许多属性和方法来控制视频播放器的行为。以下是一些常用的属性和方法： 属性： 1. options：设置视频播放器的选项，例如自动播放、循环播放等。 2. source：设置视频的源文件地址。 3. poster：设置视频的封面图片地址。 4. width：设置视频播放器的宽度。 5. height：设置视频播放器的高度。 方法： 1. play()：播放视频。 2. pause()：暂停视频。 3. seek(time)：跳转到指定时间播放视频。 4. fullscreen()：全屏播放视频。 5. exitFullscreen()：退出全屏播放。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值