Vue.js的HTML5视频播放器组件– View.js

Vue.js的HTML5视频播放器组件– View.js
插件名称 View.js
发布时间 2020年11月5日
插件作者 liamtarpey

为Vue.js应用程序创建的最小的简洁HTML5视频播放器组件。

安装和下载:

# Yarn
$ yarn add View.js

# NPM
$ npm install View.js --save

在项目中使用组件

抓取中的viewjs.vue文件,src然后将其复制到您的项目中。

您将需要某种模块捆绑器来处理.vue文件-在此示例中,我使用的是webpack。

  1. 将组件导入项目:( import ViewJs from './viewjs.vue';或所需的任何路径)
  2. 在父组件上定义将传递给该组件的数据对象:
const videoWrapper = new Vue({
    el: '#video-wrapper',
    data: function() {
        return {
            viewJs: {
                allowFullScreen: true,
                preload: 'auto',
                sources: [
                    {
                        url: 'http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4',
                        type: 'video/mp4'
                    },
                    {
                        url: 'http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg',
                        type: 'video/ogg'
                    }
                ]
            }
        }
    },
    components: {
        viewJs: ViewJs
    }
});
  1. 在页面中包含组件HTML:
<div id="video-wrapper">
    <view-js :props="viewJs"></view-js>
</div>

选项

在数据对象中,可以定义以下内容:

  • allowFullScreen| {Boolean} | 如果要显示全屏按钮
  • preload | {String} | 如果您希望视频在页面加载时预加载。可能的值为:noneautometadata
  • sources | {Array} | 包含urltype值的对象数组