video视频播放

1.列表页面

• 一行白鹭上青天一行白鹭上青天一行白鹭上青天

export default { data () { return { list: [ { img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png', videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4' }, { img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png', videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4' }, { img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png', videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4' }, { img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png', videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4' }, { img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png', videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4' }, { img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png', videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4' }, { img: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.png', videoUrl: 'https://oss.ncsis.org.cn:9000/test/龙年拜年.mp4' } ] } }, methods: { turnPlay (url) { window.open(`${window.location.origin}/#/playVideo?url=${url}`, '_blank') } }}ul { display: flex; padding: 20px; flex-wrap: wrap; border: 1px solid red; box-sizing: border-box; justify-content: space-between; li { width: calc(90% / 6); height: 240px; overflow: hidden; border-radius: 6px; cursor: pointer; position: relative; img { width: 100%; height: 100%; object-fit: contain; transition: all 1s ease 0s; &:hover { transform: scale(1.2); } } .btn { position: absolute; top: 100px; left: 50%; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translate(-50%, 0); .el-icon-caret-right { font-size: 30px; color: #fff; } } .mask { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(transparent 0, rgba(0, 0, 0, 0.75) 100%); line-height: 40px; padding: 0 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; } }}

2.视频页面

            {{title}}                          export default {  data () {    return {      title: '一行白鹭上青天',      url: ''    }  },  created () {    this.url = this.$route.query.url  },  mounted () {    if (this.url) {      this.$refs.videoRef.play()    }  }}.content {  width: 100%;  height: 100vh;  background: #1b1b1b;  display: flex;  align-items: center;  justify-content: center;  .item {    display: flex;    flex-direction: column;  }}

需要注意我这里跳转页面路由模式是‘hash’，如果是 ‘history’，页面会跳转错误