【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>二 ...
随机推荐
- LeetCoded第239题题解--滑动窗口最大值
滑动窗口最大值 给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口内的 k 个数字.滑动窗口每次只向右移动一位. 返回滑动窗口中的最大值. 进 ...
- Go与接口:接口即约定
接口 接口类型是对其他类型行为的概括与抽象.我们可以通过接口来约定某一类通用行为.Go语言的接口是隐式的:只要实现接口A的所有方法就代表实现了接口A. 接口即约定 接口是什么样的? package i ...
- excel快捷键如下:
ALT+ 空格键,然后按下 X ALT+ 空格键,然后按下 R 首先打开表格,在A1对角用鼠标左键单击,界面会全部选中,然后调整字体大小框里的数字,回车,表格就变大了. 同时按Alt和E,再按L ...
- MVC模式职责分工及学习路上的一些感想
在正文之前想先说说自己coding道路上的一点感想,不得不感慨一下时间过得很快,之前写过一篇关于JavaWeb_MVC模式的一篇博客,转眼之间时间已经过去了两个月,那时候还是一个刚刚接触JavaWeb ...
- 微信小程序基础知识笔记
微信小程序笔记 文件构成 全局文件 app.json 小程序全局配置文件,必要,自动生成 app.js 小程序入口JS文件,一般只需申明全局变量.处理生命周期以及版本升级即可,必要 app.wxss ...
- Python脚本导出AWS EC2资源清单
环境需求 单位现在每隔一段时间需要核对一下 AWS 正在运行的 EC2 资源清单,为了避免核对失误以及重复性的工作,打算用脚本来解决这一重复性的工作.大概思路为 通过 AWS AK.SK 来索取 AW ...
- Python - 面向对象编程 - 小实战(2)
需求 小明和小美都爱跑步 小明体重 75 公斤 小美体重 45 公斤 每次跑步会减肥 0.5 公斤 每次吃东西体重增加 1 公斤 需求分析 小明.小美都是一个具体的对象,他们都是人,所以应该抽象成人类 ...
- Intel® QAT加速卡之逻辑实例
Intel QAT加速卡逻辑实例 1. QAT相关的名词组织关系 在本手册中描述的平台上,处理器可以连接到一个或多个英特尔通信芯片组8925至8955系列(PCH)设备. 从软件角度来看,每个PCH设 ...
- .net中使用JSON
在.NET使用JSON作为数据交换格式 ASP.NET中JSON的序列化和反序列化 三种方式: 使用System.Web.Script.Serialization.JavaScriptSerializ ...
- dubbo 2.7应用级服务发现踩坑小记
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 背景 本文记录最近一位读者反馈的dubbo 2.7.x中应用级服务发现的问题,关于dubbo应 ...