uni-app 使用video组件时内置浏览器报错Uncaught (in promise)DOMException: The element has no supported sources
uni-app 使用video组件时内置浏览器报错Uncaught (in promise)DOMException: The element has no supported sources
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| HBuilderX | 2.9.8 |
示例代码：
<template>
<view>
<view class="page-body">
<view class="page-section">
<video id="myVideo" crossOrigin="anonymous" src="http://vjs.zencdn.net/v/oceans.mp4" [@error](/user/error)="videoErrorCallback" :danmu-list="danmuList"
enable-danmu danmu-btn controls></video>
</view>
<view class="uni-list">
<view class="uni-list-cell">
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
</view>
</view>
<view class="btn-area">
<button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'video',
src: 'http://vjs.zencdn.net/v/oceans.mp4',
inputValue: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
]
}
},
onLoad() {
this.videoContext = uni.createVideoContext('myVideo')
},
onReady: function (res) {
this.videoContext = uni.createVideoContext('myVideo')
},
methods: {
bindInputBlur: function (e) {
this.inputValue = e.target.value
},
bindButtonTap: function () {
var that = this
uni.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: ['front', 'back'],
success: function (res) {
this.src = res.tempFilePath
}
})
},
bindSendDanmu: function () {
this.videoContext.sendDanmu({
text: this.inputValue,
color: this.getRandomColor()
})
},
videoErrorCallback: function (e) {
console.log('视频错误信息:')
console.log(e)
},
getRandomColor: function () {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
}
}
</script>
操作步骤：
<template> <view> <view class="page-body"> <view class="page-section"> </view> <view class="uni-list"> <view class="uni-list-cell"> <view> <view class="uni-label">弹幕内容</view> </view> <view class="uni-list-cell-db"> <input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" /> </view> </view> </view> <view class="btn-area"> <button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button> </view> </view> </view> </template> <script> export default { data() { return { title: 'video', src: 'http://vjs.zencdn.net/v/oceans.mp4', inputValue: '', danmuList: [{ text: '第 1s 出现的弹幕', color: '#ff0000', time: 1 }, { text: '第 3s 出现的弹幕', color: '#ff00ff', time: 3 } ] } }, onLoad() { this.videoContext = uni.createVideoContext('myVideo') }, onReady: function (res) { this.videoContext = uni.createVideoContext('myVideo') }, methods: { bindInputBlur: function (e) { this.inputValue = e.target.value }, bindButtonTap: function () { var that = this uni.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60, camera: ['front', 'back'], success: function (res) { this.src = res.tempFilePath } }) }, bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, color: this.getRandomColor() }) }, videoErrorCallback: function (e) { console.log('视频错误信息:') console.log(e) }, getRandomColor: function () { const rgb = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join('') } } } </script>
### 预期结果：
- 可以播放视频
实际结果：
- Uncaught (in promise)DOMException: The element has no supported sources.
### bug描述：
使用video组件，点击视频播放但是报错：Uncaught (in promise)DOMException: The element has no supported sources.更多关于uni-app 使用video组件时内置浏览器报错Uncaught (in promise)DOMException: The element has no supported sources的实战教程也可以访问 https://www.itying.com/category-93-b0.html
33 回复
问题已记录，已加分，感谢您的反馈！
更多关于uni-app 使用video组件时内置浏览器报错Uncaught (in promise)DOMException: The element has no supported sources的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在使用uni-app的video组件时遇到“Uncaught (in promise) DOMException: The element has no supported sources”错误，通常意味着视频组件未能找到可播放的视频源。这种情况可能是由于视频源格式不被支持、视频源URL无效或视频文件本身损坏等原因引起的。下面我将展示一个基本的video组件使用示例，并讨论如何确保视频源的正确性。
基本video组件使用示例
首先，确保你的uni-app项目中已经正确引入了video组件。以下是一个简单的示例代码：
<template>
<view>
<video
id="myVideo"
src="https://example.com/path/to/your/video.mp4"
controls
autoplay
loop
muted
@play="onPlay"
@pause="onPause"
@ended="onEnded"
></video>
</view>
</template>
<script>
export default {
methods: {
onPlay() {
console.log('Video is playing');
},
onPause() {
console.log('Video is paused');
},
onEnded() {
console.log('Video has ended');
}
}
}
</script>
<style>
/* 样式可以根据需要调整 */
</style>
确保视频源的正确性
-
检查视频URL： 确保
src属性中的URL是有效的，并且视频文件位于该URL下。 -
支持的视频格式： uni-app的
video组件通常支持MP4格式。如果你的视频是其他格式（如AVI、MKV等），可能需要转换格式。 -
CORS策略： 如果视频文件托管在不同的域上，确保服务器支持CORS（跨源资源共享）。服务器需要在响应头中包含
Access-Control-Allow-Origin。 -
视频文件完整性： 确保视频文件没有损坏，可以在其他播放器中尝试播放以验证文件完整性。
-
网络问题： 检查设备网络连接，确保视频文件可以被成功下载。
调试技巧
- 使用浏览器的开发者工具查看网络请求，确保视频文件的请求没有失败。
- 检查控制台是否有其他相关错误，这可能提供更多线索。
- 尝试使用绝对URL而不是相对URL。
通过上述步骤和代码示例，你应该能够诊断并解决“The element has no supported sources”错误。如果问题依旧存在，可能需要进一步检查视频文件的编码或寻求服务器端的支持。
