video

 

视频放在source标签内无法播放的原因可能包括浏览器不会重新获取视频、‌视频格式不支持、‌以及特定操作系统的问题。‌

1.  

   浏览器不会重新获取视频：‌当video标签中的source标签的src属性改变时，‌浏览器在第一次加载后不会重新获取视频。‌这意味着，‌如果视频的路径在页面加载后发生变化，‌浏览器不会重新加载新的视频内容，‌导致视频无法播放。‌解决这个问题的方法是将src属性直接放在video标签上，‌而不是使用source标签1。‌

2.  

   视频格式不支持：‌HTML5的video标签支持多种视频格式，‌但如果浏览器不支持视频文件的具体编码格式，‌视频将无法播放。‌解决这个问题的方法是确保视频文件的编码格式被浏览器支持。‌可以通过修改视频的编码格式，‌或者确保服务器的MIME类型配置正确，‌以支持所需的视频格式2。‌

3.  

   特定操作系统的问题：‌在某些特定的操作系统（‌如iOS）‌上，‌即使添加了source标签，‌视频也可能无法显示。‌这可能是因为特定操作系统对video标签的处理存在兼容性问题。‌解决这个问题可能需要特定的技术解决方案或工作区，‌以确保视频在特定操作系统上的兼容性和显示3。‌

所以直接放在video中即可。

 

video标签就可以播放视频，为什么还要嵌套source标签？

HTML5 中的 video 标签确实可以用来播放视频，但是使用 source 标签的原因主要有两个：

★提供多种格式的视频源：

不同的浏览器可能支持不同的视频格式。例如，Safari 支持 MP4 格式的视频，但不支持 WebM 格式；而 Firefox 和 Chrome 则同时支持这两种格式。通过在 video 标签中嵌套多个 source 标签，可以提供多种格式的视频源，从而确保在不同的浏览器中都能正常播放视频。
例如：

<video controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

在这段代码中，浏览器会尝试按照source标签的顺序来加载视频。如果浏览器不支持 MP4 格式，那么它会跳过第一个source标签，尝试加载 WebM 格式的视频。

★为不支持 video 标签的浏览器提供回退内容：

虽然现在大部分浏览器都支持 video 标签，但仍有一些老版本的浏览器不支持。在 video 标签中嵌套 source 标签可以为这些浏览器提供回退内容（fallback content）。当浏览器不支持 video 标签时，它会忽略这个标签及其内容，然后继续解析后面的内容。因此，我们可以在 source 标签后面添加一些文本或者其他元素，为不支持 video 标签的浏览器提供一个替代的内容。

例如：

<video controls>
  <source src="myvideo.mp4" type="video/mp4">
  <source src="myvideo.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

在这段代码中，如果浏览器不支持video标签，用户会看到 "Your browser does not support the video tag." 这行文本。

 

 

vedio标签加上controls会出现视频控件，如播放按钮、进度条、全屏、观看的当前时间、剩余时间、音量按钮、音量的控制条等等。

1、可以通过下方伪类元素选择器来实现隐藏vedio标签的各种控件。

 2、若想全部隐藏,去掉controls即可。

 

隐藏video，删掉control,video还是会有占位，再设置高度为0即可。

 

 

 

将url 绑定在video标签的src属性上，vue实例的data中 data.url 没有初值也可以正常播放

<video :src="data.url" controls="controls">您的浏览器不支持 video 标签。</video>
data() {
return {
data: {
url: ''
}
};
},

测试2
将url 绑定在video标签内source 标签的src属性上，vue实例的data中 data.url 不管有没有初值都无法播放后端传输的url，有初始值播放的是有初始值的视频

<video controls width="250" >
<source :src="data.url" type="video/mp4">
Download the
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>

data() {
return {
data: {
url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
}
};
},

测试3
将url 绑定在vue-core-video-player插件的src属性上，vue实例的data中 data.url 有初值可以正常播放

<vue-core-video-player :src="data.url"></vue-core-video-player>

data() {
return {
data: {
url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
}
};
},

插件地址
文档目录: vue-core-video-player