环境:

  • 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 播放视频的更多相关文章

  1. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  2. 视频播放效果--video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  3. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  4. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  5. javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)

    javascript JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦) 缺陷就是 因为采用的是 MPEG1解码器 所以清晰度有点低 做直播可以考虑下 如果要清晰度高点 可以采取序列 ...

  6. 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

  7. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云 ...

  8. vue使用 video.js动态切换视频源视频源不刷新问题

    网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video  id="my-player" con ...

  9. html页面引用video.js播放m3u8格式视频

    //head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...

随机推荐

  1. LeetCoded第239题题解--滑动窗口最大值

    滑动窗口最大值 给定一个数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口内的 k 个数字.滑动窗口每次只向右移动一位. 返回滑动窗口中的最大值. 进 ...

  2. Go与接口:接口即约定

    接口 接口类型是对其他类型行为的概括与抽象.我们可以通过接口来约定某一类通用行为.Go语言的接口是隐式的:只要实现接口A的所有方法就代表实现了接口A. 接口即约定 接口是什么样的? package i ...

  3. excel快捷键如下:

    ALT+ 空格键,然后按下 X ALT+ 空格键,然后按下 R  首先打开表格,在A1对角用鼠标左键单击,界面会全部选中,然后调整字体大小框里的数字,回车,表格就变大了. 同时按Alt和E,再按L   ...

  4. MVC模式职责分工及学习路上的一些感想

    在正文之前想先说说自己coding道路上的一点感想,不得不感慨一下时间过得很快,之前写过一篇关于JavaWeb_MVC模式的一篇博客,转眼之间时间已经过去了两个月,那时候还是一个刚刚接触JavaWeb ...

  5. 微信小程序基础知识笔记

    微信小程序笔记 文件构成 全局文件 app.json 小程序全局配置文件,必要,自动生成 app.js 小程序入口JS文件,一般只需申明全局变量.处理生命周期以及版本升级即可,必要 app.wxss ...

  6. Python脚本导出AWS EC2资源清单

    环境需求 单位现在每隔一段时间需要核对一下 AWS 正在运行的 EC2 资源清单,为了避免核对失误以及重复性的工作,打算用脚本来解决这一重复性的工作.大概思路为 通过 AWS AK.SK 来索取 AW ...

  7. Python - 面向对象编程 - 小实战(2)

    需求 小明和小美都爱跑步 小明体重 75 公斤 小美体重 45 公斤 每次跑步会减肥 0.5 公斤 每次吃东西体重增加 1 公斤 需求分析 小明.小美都是一个具体的对象,他们都是人,所以应该抽象成人类 ...

  8. Intel® QAT加速卡之逻辑实例

    Intel QAT加速卡逻辑实例 1. QAT相关的名词组织关系 在本手册中描述的平台上,处理器可以连接到一个或多个英特尔通信芯片组8925至8955系列(PCH)设备. 从软件角度来看,每个PCH设 ...

  9. .net中使用JSON

    在.NET使用JSON作为数据交换格式 ASP.NET中JSON的序列化和反序列化 三种方式: 使用System.Web.Script.Serialization.JavaScriptSerializ ...

  10. dubbo 2.7应用级服务发现踩坑小记

    本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star. 背景 本文记录最近一位读者反馈的dubbo 2.7.x中应用级服务发现的问题,关于dubbo应 ...