import{e as a,o as n,G as t}from"./vendor.js";const p={class:"markdown-body"},l=t(`

video \u89C6\u9891\u64AD\u653E\u5668

\u4ECB\u7ECD

\u539F\u751Fvideo\u5B9E\u73B0\u7684\u89C6\u9891\u64AD\u653E\u5668

\u5B89\u88C5

import { createApp } from 'vue';
import { Video } from '@nutui/nutui';

const app = createApp();
app.use(Video);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<nut-video
  :source="source"
  :options="options"
  @play="play"
  @pause="pause"
  @playend="playend">
</nut-video>

setup() {
    const state = reactive({
      source: {
        src: "https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D",
        type: "video/mp4",
      },
      options: {
        controls: true,
      },
    });
    const play = (elm: any) => console.log('play', elm);
    const pause = (elm: any) => console.log('pause', elm);
    const playend = (elm: any) => console.log('playend', elm);

    return { play, pause, playend, ...toRefs(state) };
}

\u81EA\u52A8\u64AD\u653E

autoplay \u5C5E\u6027\u8BBE\u7F6E\u89C6\u9891\u81EA\u52A8\u64AD\u653E

<nut-video :source="source" :options="options"></nut-video>

setup() {
    const state = reactive({
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4',
        type: 'video/mp4'
      },
      options: {
        autoplay: true,
        muted: true,
        controls: true
      },
    });

    return { ...toRefs(state) };
}

\u521D\u59CB\u5316\u9759\u97F3

muted\u5C5E\u6027\u8BBE\u7F6E\u89C6\u9891\u521D\u59CB\u5316\u9759\u97F3

<nut-video :source="source" :options="options"></nut-video>

setup() {
    const state = reactive({
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4',
        type: 'video/mp4'
      },
      options: {
        muted: true,
        controls: true
      },
    });

    return { ...toRefs(state) };
}

\u89C6\u9891\u5C01\u9762\u6D77\u62A5\u8BBE\u7F6E

poster \u5C5E\u6027\u8BBE\u7F6E\u89C6\u9891\u6D77\u62A5

<nut-video :source="source" :options="options"></nut-video>

setup() {
    const state = reactive({
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4',
        type: 'video/mp4'
      },
      options: {
        controls: true,
        poster: 'https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp'
      },
    });

    return { ...toRefs(state) };
}

\u884C\u5185\u64AD\u653E

playsinline \u5C5E\u6027\u8BBE\u7F6E\u79FB\u52A8\u7AEF\u89C6\u9891\u884C\u5185\u64AD\u653E\uFF0C\u963B\u6B62\u65B0\u6253\u5F00\u9875\u9762\u64AD\u653E\uFF08\u517C\u5BB9 ios\uFF0C\u517C\u5BB9\u90E8\u5206\u5B89\u5353\u673A\uFF09

<nut-video :source="source" :options="options"></nut-video>

setup() {
    const state = reactive({
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4',
        type: 'video/mp4'
      },
      options: {
        playsinline: true,
        controls: true,
      },
    });

    return { ...toRefs(state) };
}

\u89C6\u9891\u80CC\u666F\u56FE

\u5F53\u8BBE\u7F6E\u89C6\u9891\u4E3A\u80CC\u666F\u56FE\u65F6\u9700\u8981\u5C06 muted \u9759\u97F3\u3001 disabled \u7981\u6B62\u64CD\u4F5C\u3001loop \u5FAA\u73AF\u64AD\u653E\u3001autoplay \u81EA\u52A8\u64AD\u653E\u8BBE\u7F6E\u4E3A true\uFF0C\u79FB\u52A8\u7AEF\u9700\u8981\u8BBE\u7F6E playsinline \u884C\u5185\u5C55\u793A

<nut-video :source="source" :options="options"></nut-video>

setup() {
    const state = reactive({
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4',
        type: 'video/mp4'
      },
      options: {
        controls: false,
        autoplay: true,
        muted: true,
        disabled: true,
        playsinline: true,
        loop: true
      },
    });

    return { ...toRefs(state) };
}

\u89C6\u9891\u5207\u6362

\u5F53\u89C6\u9891\u5730\u5740\u53D1\u751F\u53D8\u5316\u65F6\uFF0C\u91CD\u7F6E\u89C6\u9891

<nut-video :source="source"></nut-video>
<nut-button type="primary" @click="changeVideo">\u5207\u6362\u89C6\u9891</nut-button>

setup() {
    const state = reactive({
      source: {
        src: 'https://storage.jd.com/about/big-final.mp4',
        type: 'video/mp4'
      },
    });
    const changeVideo = () => {
      state.source1 = {
        src: 'https://vjs.zencdn.net/v/oceans.mp4',
        type: 'video/mp4'
      };
    };

    return { ...toRefs(state), changeVideo };
}

API

Props

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
source	\u89C6\u9891\u5730\u5740\u548C\u7C7B\u578B\u8BBE\u7F6E	Object	-
options	\u63A7\u5236\u89C6\u9891\u64AD\u653E\u5C5E\u6027	Object	required
options.autoplay	\u662F\u5426\u81EA\u52A8\u64AD\u653E	Boolean	false
options.poster	\u6D77\u62A5\u8BBE\u7F6E	String	-
options.loop	\u662F\u5426\u5FAA\u73AF\u64AD\u653E	Boolean	false
options.controls	\u662F\u5426\u5C55\u793A\u64CD\u4F5C\u680F	Boolean	true
options.muted	\u662F\u5426\u9759\u97F3	Boolean	false
options.volume	\u97F3\u91CF\u63A7\u5236	Number	0.5
options.disabled	\u7981\u7528\u64CD\u4F5C\uFF08\u5982\u5FAA\u73AF\u64AD\u653E\u7684\u80CC\u666F\u56FE\uFF0C\u7981\u6B62\u64CD\u4F5C\uFF09	Boolean	false
options.playsinline	\u662F\u5426\u8BBE\u7F6E\u4E3A\u884C\u5185\u64AD\u653E\u5143\u7D20\uFF08\u89E3\u51B3\u5B89\u5353\u517C\u5BB9\u95EE\u9898\uFF09	Boolean	false

Events

\u4E8B\u4EF6\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
play	\u64AD\u653E	\u2013
pause	\u6682\u505C	\u2013
playend	\u64AD\u653E\u5B8C\u6210\u56DE\u8C03	\u2013

`,38),e=[l],j={setup(c,{expose:s}){return s({frontmatter:{}}),(r,h)=>(n(),a("div",p,e))}};export{j as default};