首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue音频视频

vue中添加音频和视频的示例详解

2023-08-27 09:53:47 作者：一个叶小小

这篇文章主要为大家详细介绍了如何vue中添加音频和视频的相关知识,文中的示例代码简洁易懂,具有一定的学习价值,感兴趣的小伙伴可以了解下

视频播放功能

1. 安装vue-video-player

npm install vue-video-player --save

或

yarn add vue-video-player --save

2. 在main.js中全局引用

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer)

或以局部方式按需引入

import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

注：在此处可能会出现引用不上的错误，npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fvue-video-player - Not found

这个报错是因为察觉到组件引用不了，所以再次安装vue-video-player，解决方法就是在根目录手动创建声明文件，手动创建一个 TypeScript 声明文件（.d.ts 文件），来为 vue-video-player 添加类型声明。在项目的根目录中创建一个新文件，命名为 vue-video-player.d.ts，然后添加以下内容：

declare module 'vue-video-player';

这将告诉 TypeScript vue-video-player 模块的类型信息，尽管这些信息可能不是很准确。还有一个解决方案就是你可以在 TypeScript 配置中关闭严格模式，这样 TypeScript 将不会强制执行类型检查。在 tsconfig.json 文件中将 "strict": true 更改为 "strict": false。

3. 视频播放器

<video-player
      ref="videoPlayer"
      class="video-player vjs-custom-skin"
      @play="handlePlay"
      @pause="handlePause"
      :options="playerOptions">
</video-player>

配置参数

import { ref } from 'vue';
export default {
  setup() {
    const videoPlayer = ref(null);
    const audioSource = ref('./assets/music.mp3');
    const playerOptions = {
      height: 400,
      // playbackRates: [0.7, 1.0, 1.5, 2.0],  //视频加速
      autoplay: false,
      muted: false,
      loop: false,
      preload: 'auto',
      language: 'zh-CN',
      fluid: true,
      sources: [
        {
          type: 'video/mp4',
          src: require('./assets/video.mp4')
        }
      ],
      poster: require('./assets/04.jpg'),   // 封面地址
      notSupportedMessage: '此视频暂无法播放，请稍后再试',
      controlBar: {
        timeDivider: true,   //当前时间和持续时间的分隔符
        durationDisplay: true,   //显示持续时间
        remainingTimeDisplay: false,  //是否显示剩余时间功能
        fullscreenToggle: true,  //全屏按钮
        showPlayButton: true,
      }
    };
    const showPlayButton = ref(true);
    const handlePlay = () => {
      showPlayButton.value = false;
    };
    const handlePause = () => {
      showPlayButton.value = true;
    };
    return {
      videoPlayer,
      playerOptions,
      showPlayButton,
      handlePlay,
      handlePause,
      audioSource,
    };
  },
};

注：此参数中包含以下音频播放器的参数

音频播放功能

<audio ref="audioPlayer" controls>
    <source :src="audioSource" type="audio/mpeg">
    您的浏览器不支持
</audio>

到此这篇关于vue中添加音频和视频的示例详解的文章就介绍到这了,更多相关vue音频视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！