Vue实现视频播放列表（一）—

Vue实现视频播放列表（一）——video.js组件的使用

video.js组件官网——https://www.npmjs.com/package/video.js

1、安装

引入video.js组件

npm install --save-dev video.js

或

cnpm install --save-dev video.js

然后在main.js中引用

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$videos = Video

引用完成后我们就可以做视频列表了

2、基本使用-示例

视频地址链接

https://docs.egret.com/engine/img/engine2d.mp4
https://vjs.zencdn.net/v/oceans.mp4

index.vue

<videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"data-setup='{}'><source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source><source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source><source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

3、实例

index.vue

<div><videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"data-setup="{}"><sourcesrc="./video.mp4"type="video/mp4"><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<ahref="https://videojs.com/html5-video-support/"target="_blank">supports HTML5 video</a></p></video>
</div><style>video#my-player.video-js {width: 94%;height: 100%;}
</style>

4、效果

Vue实现视频播放列表（一）——video.js组件的使用相关推荐

Vue实现视频播放列表（二）——video.js组件的使用-实现视频播放列表-切换播放
Vue实现视频播放列表--video.js组件的使用-实现视频播放列表-切换播放 1.video标签--https://www.runoob.com/html/html-videos.html 2.v ...
Vue3封装Video.js组件(基于video.js)
Vue3封装Video.js组件话不多说直接上代码在项目中安装Video.js 通过npm安装video.js npm install video.js --save Video.js组件的封装 ...
H5视频之视频直播(前端, video.js)
H5视频之视频直播(前端, video.js) 原理视频直播的流程原理图如下: 这里写图片描述: 大致过程(摘自知乎:https://www.zhihu.com/question/37887655/ ...
vue开发移动端使用video.js播放视频
安装引入文档 HTML代码 css自定义播放按钮 css居中播放按钮 css设置简洁播放按钮 css设置海报占据整个视频空间 js使用设置 videojs设置中文销毁视频播放器实例使用html ...
vue播放视频使用原生video标签基本功能（不含样式）
直接上代码: <template><div style="display: flex"><!-- 原生video标签,controls表示为可控制视频 ...
关于VIDEO.JS播放器控制栏播放按钮点击问题
关于如何调用video.js组件作为播放器实现视频播放功能,网上有很多相关帖子,这里就不详细展开了.但在众多帖子里面,都没有提到网页版video的控制栏播放按钮点击问题,特此留贴记录一番. 症状是如下 ...
html 在线播放器,HTML5 Web播放器-Video.js
原标题:HTML5 Web播放器-Video.js Video.js是一款优秀的HTML5 Web视频播放器.它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大 ...
javascript 实现blob加密视频（html video），服务端为php
现在大部分的网站视频链接都是 blob:http://...... 例如: 出于好奇,研究了一番其实这种是视频mp4格式转码m3u8格式再分为多个小切片(多个小视频)结合 video.js ...
vue+video.js实现视频播放列表
1.引入Video.js npm install --save-dev video.js 然后在main.js中引用 import Video from 'video.js' import 'vide ...

Vue实现视频播放列表（一）——video.js组件的使用

Vue实现视频播放列表（一）——video.js组件的使用

1、安装

2、基本使用-示例

3、实例

4、效果

Vue实现视频播放列表（一）——video.js组件的使用相关推荐

最新文章

热门文章