视频列表html页面,vue + video.js实现视频列表页（多个视频）

vue + video.js实现视频列表页

vue项目中做一个视频列表页，本来用原生video标签来实现，由于考虑到手机浏览器兼容问题，找了很多插件，最后决定用video.js这个插件来实现。Video.js是一个有着HTML5背景的网络视频播放器。它同时支持HTM5和Flash视频，简单来说就是HTMl5 和 Flash 视频播放器

安装video.js

$ npm install video.js

在main.js中引用

import Video from 'video.js'

import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

页面使用

export default {

name: 'HelloWorld',

data(){

return {

list:[

{

src:'http://img.yopoo.cn/banner_video.mp4 ',

id:0,

pic:"",

{

src:'http://img.yopoo.cn/banner_video.mp4 ',

id:1,

pic:"",

{

src:'http://img.yopoo.cn/banner_video.mp4 ',

id:2,

pic:"",

}

]

}

mounted() {

this.initVideo();

methods: {

initVideo() {

//初始化视频方法循环列表获取每个视频的id

this.list.map((item,i)=>{

let myPlayer = this.$video('myVideo'+item.id, {

//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。

controls: true,

//自动播放属性,muted:静音播放

autoplay: "muted",

//建议浏览器是否应在加载元素后立即开始下载视频数据。

preload: "auto",

//设置视频播放器的显示宽度(以像素为单位)

width: "800px",

//设置视频播放器的显示高度(以像素为单位)

height: "400px",

//封面图

poster:item.pic

});

})

}

效果图

以上就是实现的步骤和代码有什么问题欢迎大家评论和指出。

视频列表html页面,vue + video.js实现视频列表页（多个视频）相关推荐

Vue实现视频播放列表（一）——video.js组件的使用
Vue实现视频播放列表(一)--video.js组件的使用 video.js组件官网--https://www.npmjs.com/package/video.js 1.安装引入video.js组件 ...
Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)
场景 Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览: Nginx搭建RTMP服务器+FFmpeg实现海康威视摄像头预览_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
通过video.js或原生事件统计实际观看视频时长，支持多视频时长统计
前言:1.根据评论提问,优化了视频统计逻辑,增加了网络卡顿时暂停计时,重新播放后重新计时的功能.根据以下下载地址可以下载完整代码示例, 更新于:2022年8月26号,2.新增通过原生事件的写法统计观看 ...
html页面中使用 JS 返回上一页及返回上一页并刷新，iframe中打开指定页面，跳转到指定页面
html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面. 常用方法: window.history.go(-1); //返回上一页 window.histo ...
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.video标签--https://www.runoob.com/html/html-videos.html 2.v ...
vue+video.js播放.m3u8地址视频
使用的包 "video.js": "^7.6.6", "videojs-contrib-hls": "^5.15.0", ...
使用vant+video.js实现轮播图图片和视频轮播播放
先上效果图 1. 安装 npm install video.js 2. 在需要用到的页面引入 import Video from "video.js";import "v ...

视频列表html页面,vue + video.js实现视频列表页（多个视频）

视频列表html页面,vue + video.js实现视频列表页（多个视频）相关推荐

最新文章

热门文章