【vue】使用 Video.js 播放视频
环境:
vue 2.0+
element ui (这里的代码用了elmentui的按钮样式,可以不用elment ui的样式)
安装
在项目中安装 video.js
。
npm install video.js
引入
在 main.js
中引入以下内容:
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
使用
实现的效果是:初始时,视频播放不会显示。点击按钮后,视频显示出来,跨域进行播放。
<template>
<el-button @click="videoShow = !videoShow">观看视频<i class="el-icon-right"></i></el-button>
<div class="player" v-if="videoShow === true">
<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" v-if="videoShow === true"
@ended="onPlayerEnded($event)">
<source src="../assets/video/video.mp4 type="video/mp4" >
</video>
</div>
</template>
<script>
export default {
name: "Videojs",
data() {
return {
videoShow: false,
}
},
methods: {
// 监听视频播放结束事件
onPlayerEnded() {
console.log("视频结束啦------")
this.videoShow = !this.videoShow;
},
},
}
</script>
不知道为什么,按钮绑定事件不会生效( @click='getVideo'
),就是,初始时看不见视频,点击按钮后,视频依然出不来,我也不知道这是为啥。我写的按钮绑定事件时下面的样子
<script>
methods: {
getVideo() {
this.videoShow = !this.videoShow;
},
},
</script>
参考文档
Github 参考文档:vue-video-player
【vue】使用 Video.js 播放视频的更多相关文章
- video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- 视频播放效果--video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- 如何使用微信小程序video组件播放视频
相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...
- javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)
javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦) 缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列 ...
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
- 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...
- vue使用 video.js动态切换视频源视频源不刷新问题
网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video id="my-player" con ...
- html页面引用video.js播放m3u8格式视频
//head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...
随机推荐
- SpringBoot获取所有接口的路由
@Autowired WebApplicationContext applicationContext; @RequestMapping(value = "v1/getAllUrl" ...
- DQL,DML,DDL,DCL分别是什么?
SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 数据查询语言DQL数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHERE子句 ...
- Javascript - Vue - 路由
vue router.js 下载:vue-router.js, 该文件依赖于vue.js <script src="Scripts/vue-2.4.0.js">< ...
- 未解决:为什么在struts2下新建ognl的包,会出错?
首先开始在src下新建了一个名叫ognl的包: 发现在其中放置了一个loginAction,即使是最简单的跳转都不能实现: 直接抛出了java.lang.Exception; 传递参数更出现了异常: ...
- easyexcel
导出: package com.example.demo.excel.demo0; import com.alibaba.excel.annotation.ExcelProperty; import ...
- Java 学习:数据类型
前言:Java属于强类型语言 强类型语言:要求变量的使用要严格符合规定,所有变量都必须先定义后才能使用 优势就是安全性高,但劣势速度慢 数据类型 Java的数据类型分为两大类: 基本类型(primit ...
- os用法总结:python中必须掌握的内置模块os,实现与计算机操作系统的常规交互!
os模块说明 ''' os 模块 Os库是python标准库,包含几百个函数 常用路径操作.进程管理.环境参数等几类 路径操作:os.path子库,处理文件路径及信息 进程管理:启动系统中其他程序 环 ...
- HCNP Routing&Switching之OSPF LSA更新规则和路由汇总
前文我们了解了OSPF外部路由类型以及forwarding address字段的作用,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15225673.html: ...
- 痞子衡嵌入式:在MDK开发环境下将关键函数重定向到RAM中执行的几种方法
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在MDK开发环境下将关键函数重定向到RAM中执行的几种方法. 这个关键函数重定向到 RAM 中执行系列文章,痞子衡已经写过 <IA ...
- Linux-实战常用命令
目录 关机/重启/注销 系统信息和性能查看 磁盘和分区 ⽤户和⽤户组 ⽹络和进程管理 常⻅系统服务命令 ⽂件和⽬录操作 ⽂件查看和处理 打包和解压 RPM包管理命令 YUM包管理命令 DPKG包管理命 ...