vuevideo基于vue.js的视频播放器组件

JavaScript09

vuevideo基于vue.js的视频播放器组件,第1张

一款基于 vue.js 的轻量级的视频播放器插件插件

NPM

或者使用 yarn

默认英语,你如果想成中文就加一个 lang

en: 英语

zh-CN: 简体中文

jp: 日本

Use custom language data

外部路径:

非常简单!就是直接上!

本地路径:

不能直接 ./assets/1.mp4 ,无效的。需要使用 require("...")

组件保持了和原生 HTML Video 属性配置的对接

案例

VueCoreVideoPlayer 遵循 W3C 标准的媒体事件 API ,你可以前往 MDN 获取这些细节,下面罗列一些非常常用的事件:

原文地址:vue-core-video-player-基于vue.js的视频播放器组件 - Iron_Man-super - 博客园

1.播放器外层容器定义动态样式,播放器本身增加动画

2.定义变量记录当前是否处于全模式

3.切换全屏方法

4.页面样式控制的相关计算属性

5.部分css样式

款很棒的

HTML5

视频播放器作为下一代的网页语言,HTML5

拥有很多让人期待已久的新特性,其中之一就是

video

标签,让开发者可以在网页中和添加图片一样简单的方式添加视频。1、VideoJSVideoJS

是最流行的

HTML5

视频播放器,免费、开源,可使用

CSS

轻松定制皮肤,支持全屏,在不支持的浏览器自动切e799bee5baa6e4b893e5b19e31333433623063换为

Flash

播放。2、SublimeVideoSublimeVideo

是一个独特的基于云概念的

HTML5

视频播放器,功能强大,可惜不是免费的。3、Open

Standard

Media

(OSM)

Player由

Alethia

Inc

开发,是集全功能于一体的网络播放器,非常不错。4、Video

for

EverybodyVideo

for

Everybody

让你在网页中嵌入一小段代码就能支持

HTML5

视频,在不支持的浏览器中自动切换为

Flash

播放。5、Kaltura

HTML5Kaltura

HTML5

视频解决方案

兼容所有主流浏览器,采用独特的

fallback

机制。6、FlareVideoFlareVideo

Alex

MacCaw

开发,他是一位Ruby/JS开发者,FlareVideo主要特色:在不支持

HTML5

视频的情况,用Flash作为替代方案可轻松自定义主题支持全屏完全开源和免费用于商业用途7、Projekktor全文