H5 video 制作遇到的小问题和解决方案

2019年9月14日 137次阅读 来源: spademan

1.vue2.0动态更新video标签的autoPlay属性不起作用

<video
  v-if='item.options.video.autoPlay'
  :src="`${host}${item.options.src.url}`" alt=""
  :height="item.options.src.height"
  :width="item.options.src.width"
  :autoplay='true'
  controls>
</video>
<video
  v-else
  :src="`${host}${item.options.src.url}`" alt=""
  :height="item.options.src.height"
  :width="item.options.src.width"
  controls>
</video>

一直觉得，是重新渲染了dom结构，但是其实只是增删了属性
vue diff算法中避免性能问题，导致我们动态切换autoPlay值得时候并不能直接看到效果，

解决方案

<video
  v-if='item.options.video.autoPlay'
  :src="`${host}${item.options.src.url}`" alt=""
  :height="item.options.src.height"
  :width="item.options.src.width"
  :autoplay='true'
  key='video-1'
  controls>
</video>
<video
  v-else
  :src="`${host}${item.options.src.url}`" alt=""
  :height="item.options.src.height"
  :width="item.options.src.width"
  :key='video-2'
  controls>
</video>

设置了key值，vue会认为这个是两个不同的dom，所以就会直接重新渲染，就能看到autoPlay的效果

以下写法更简单

<video
  :src="`${host}${item.options.src.url}`" alt=""
  :height="item.options.src.height"
  :width="item.options.src.width" 
  :autoplay='item.options.video.autoPlay'
  :key='`${item.options.video.autoPlay}`'
  controls>
</video>
    原文作者：spademan
    原文地址: https://segmentfault.com/a/1190000009178237
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞