linksocarina 2020-07-22 00:05 采纳率: 100%
浏览 311
已采纳

video标签利用文件对象视频播放的问题

下面是vue写的视频预览代码,我想直接通过本地文件FIle对象来预览,于是
利用了URL.createObjectURL

this.FileSrc = URL.createObjectURL(this.PreviewFile)
this.$bus.emit('startVideoPreview', this.FileSrc)
<template>
    <div class='demo'>
        <video preload="auto" controls="controls" id="myVideo"
        height="100%" width="600px" :poster="imgSrc">
        <source :src="FileSrc">
        您的浏览器不支持 video 标签</video>
    </div>
</template>

<script>
// import $ from 'jquery'
export default {
  methods: {
  },
  data () {
    return {
      FileSrc: '',
      imgSrc: ''
    }
  },
  computed: {
  },
  created () {
    this.$bus.on('startVideoPreview', (val) => {
      this.FileSrc = val
    })
    this.$bus.on('closePreview', () => {
      const video = document.getElementById('myVideo')
      video.pause()
    })
  }
}
</script>

<style scoped>
.demo{
  display: inline-block;
  width: 600px;
  height: 338px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}
.demo:hover {
  display: block;
}
.video_text {
  width: 70%;
  margin: 0 auto;
}
video:focus {
  outline: 0;
}
.video-js .vjs-big-play-button {
  width: 100px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
}
</style>

问题就是现在播放的时候我利用source标签的话,就是不显示视频,只有音频出现;如果我利用video的src的话就会出现两个声音,其中一个声音我还控制不了
,就算返回使用了js pause他还在播放。请各位出手相救
网上说要利用视频转码,但是我要做预览功能,不可能要求用户进行转码(学生党做项目,经验不足多多指教)

  • 写回答

2条回答 默认 最新

  • it_lin_web 2020-07-25 18:11
    关注

    应该是你的视频编码浏览器不支持,不是指格式哦(例如MP4),指视频编码不支持。可以用格式工厂转通用支持的编码。例如如下:
    1. 图一,谷歌是不支持的图片说明
    2. 图二是支持的图片说明

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已采纳回答 12月5日