Video 视频

视频播放器

基本用法

  1. <nut-video :sources="sources" :options="options" @play="play" @pause="pause" @playend="playend"> </nut-video>

source 属性:设置视频地址和格式类型,可设置多种视频文件格式以便支持不同浏览器的解析支持,一般采用:MP4、webm、ogv 等格式

options 属性:设置视频的播放参数,如:autoplay、controls、poster、loop、volume 等

  1. export default {
  2. data() {
  3. return {
  4. sources: [
  5. {
  6. src:
  7. 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
  8. type: 'video/mp4'
  9. }
  10. ],
  11. options: {
  12. controls: true
  13. },
  14. }
  15. },
  16. methods: {
  17. play(elm){
  18. console.log('play',elm)
  19. },
  20. pause(e){
  21. console.log('pause')
  22. },
  23. playend(e){
  24. alert('播放结束')
  25. }
  26. }
  27. };

自动播放

autoplay 属性设置视频自动播放

  1. <nut-video :sources="sources" :options="options2"></nut-video>
  1. export default {
  2. data() {
  3. return {
  4. options2: {
  5. autoplay: true,
  6. volume: 0.6,
  7. poster: ''
  8. },
  9. }
  10. },
  11. };

初始化静音

muted 属性设置视频初始化静音

  1. <nut-video :sources="sources" :options="options3"></nut-video>
  1. export default {
  2. data() {
  3. return {
  4. options3: {
  5. controls: true,
  6. muted: true
  7. },
  8. }
  9. },
  10. };

视频封面海报设置

poster 属性设置视频海报

  1. <nut-video :sources="sources" :options="options4"></nut-video>
  1. export default {
  2. data() {
  3. return {
  4. options4: {
  5. controls: true,
  6. poster: 'https://img10.360buyimg.com/ling/s640x356_jfs/t1/96045/31/13848/43886/5e5e35ffE68170c74/861a6394e38810f0.png',
  7. },
  8. }
  9. },
  10. };

行内播放

playsinline 属性设置移动端视频行内播放,阻止新打开页面播放(兼容 ios,兼容部分安卓机)

  1. <nut-video :sources="sources" :options="options5"></nut-video>
  1. export default {
  2. data() {
  3. return {
  4. options5: {
  5. playsinline: true,
  6. controls: true,
  7. },
  8. }
  9. },
  10. };

视频背景图

当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true,移动端需要设置 playsinline 行内展示

  1. <nut-video :sources="sources" :options="options5"></nut-video>
  1. export default {
  2. data() {
  3. return {
  4. options6: {
  5. autoplay: true,
  6. volume: 0.6,
  7. poster: '',
  8. muted: true,
  9. disabled: true,
  10. playsinline: true,
  11. loop: true
  12. },
  13. }
  14. }
  15. };

视频切换

当视频地址发生变化时,重置视频

  1. <div class="video-con" >
  2. <nut-video :sources="sources1" :options="options"></nut-video>
  3. </div>
  1. export default {
  2. data() {
  3. return {
  4. sources1: [
  5. {
  6. src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
  7. type: 'video/mp4'
  8. }
  9. ],
  10. options: {
  11. controls: true
  12. },
  13. },
  14. }
  15. methods: {
  16. changeVideo() {
  17. this.sources1 = [
  18. {
  19. src: 'http://vjs.zencdn.net/v/oceans.mp4',
  20. type: 'video/mp4'
  21. }
  22. ]
  23. },
  24. }
  25. };

Prop

字段说明类型默认值
sources视频地址和类型设置Array-
options控制视频播放属性Objectrequired
options.autoplay是否自动播放Booleanfalse
options.poster海报设置String-
options.loop是否循环播放Booleanfalse
options.controls是否展示操作栏Booleantrue
options.muted是否静音Booleanfalse
options.volume音量控制Number0.5
options.disabled禁用操作(如循环播放的背景图,禁止操作)Booleanfalse
options.playsinline是否设置为行内播放元素(解决安卓兼容问题)Booleanfalse

Event

事件名称说明回调参数
play播放
pause暂停
playend播放完成回调

Video 视频 - 图1