vue.js如何实现视频播放

vue.js实现视频播放的方法：1、安装vue-video-player插件；2、在main.js中导入video.js；3、使用vue-video-player插件即可。

本文操作环境：windows10系统、vue 2.5.2、thinkpad t480电脑。

vue中有一个vue-video-player插件，我们可以使用该插件来实现视频播放。下面就让我们一起来看看吧！

使用vue-video-player(可以自适应，支持多种格式)

（1）安装vue-video-player插件

cnpm install --save vue-video-player

（2）在main.js中导入video.js

import VideoPlayer from 'vue-video-player' Vue.use(VideoPlayer) require('vue-video-player/src/custom-theme.css')

（3）使用

<template>   <div>     <div v-for="i in 10" :key="i">       <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsline="false" :options="playerOptions"></video-player>       <p>{{'视频' + i}}</p>     </div>   </div> </template>  <script> export default {   name: 'Video2',   data () {     return {       playerOptions: {         playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度         autoplay: false, // 如果true,浏览器准备好时开始回放。         muted: false, // 默认情况下将会消除任何音频。         loop: false, // 导致视频一结束就重新开始。         preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）         language: 'zh-CN',         aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）         fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。         sources: [{           type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目           src: '../../../../static/video1.mp4' // url地址         }],         poster: '../../../../static/full_res.jpg', // 你的封面地址         width: document.documentElement.clientWidth, // 播放器宽度         notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。         controlBar: {           timeDivider: true,           durationDisplay: true,           remainingTimeDisplay: false,           fullscreenToggle: true // 全屏按钮         }       }     }   } } </script>  <style scoped >   .video-js .vjs-icon-placeholder {     width: 80%;     height: 80%;     display: block;   }   /* .video-player {     width: 50%;   } */ </style>

推荐学习：php培训