uni-app video 最近无法播放视频

uni-app video 最近无法播放视频

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.8.4

手机系统：Android

手机系统版本号：Android 12

手机厂商：OPPO

手机机型：OPPO A53 5G

页面类型：vue

vue版本：vue2

打包方式：云端

示例代码：

<template>  
<view class="video-play">  
<scs-loading v-if="isLoading"></scs-loading>  
<video  
controls  
v-if="videoUrl"  
id="myvideo"  
src="videoUrl"
     @error="videoErrorCallback"
     @fullscreenchange="screenChange"
  ></video>
</view>
</template>  

<script>
export default {
data(){
return {
videoUrl: '',
isLoading: false
}
},
onLoad(e) {
let self = this
self.videoUrl = e.url;
self.isLoading = true
setTimeout(() => {
self.play()
},2000)
},
methods: {
videoErrorCallback: function (e) {
console.log('视频错误信息:'+ this.videoUrl)
console.log(e)
},
play(){
let videoContext = uni.createVideoContext("myvideo", this);    // this这个是实例对象 必传
videoContext.requestFullScreen({ direction: 0 });
videoContext.play();
this.isLoading = false
},
screenChange(e) {
let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
if (!fullScreen) {
//退出全屏
uni.navigateBack({
delta: 1,
})
}
},
}
}
</script> 
<style lang="less">
.video-play{
video{
width: 100%;
height: 100%;
}
}
</style>

操作步骤：

视频地址 https://imgs.scs.work/scs/20231016/3ed2cfef133844ec87084dc9fedd3daa.mp4 播放视频

预期结果：

可以播放视频

实际结果：

无法播放


更多关于uni-app video 最近无法播放视频的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以正常播放
<template>
<view class="content">

</view>
</template>

<script> export default { data() { return { videoUrl: '', isLoading: false } }, onLoad(e) { let self = this self.videoUrl = e.url; self.isLoading = true setTimeout(() => { self.play() }, 2000) }, methods: { videoErrorCallback: function(e) { console.log('视频错误信息:' + this.videoUrl) console.log(e) }, play() { let videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传 videoContext.requestFullScreen({ direction: 0 }); videoContext.play(); this.isLoading = false }, screenChange(e) { let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏 if (!fullScreen) { //退出全屏 uni.navigateBack({ delta: 1, }) } }, } } </script> <style lang="scss"> .video-play { video { width: 100%; height: 100%; } } </style>

更多关于uni-app video 最近无法播放视频的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据您提供的信息，uni-app video组件无法播放视频可能由以下几个原因导致：

  1. 视频格式兼容性问题：
  • Android设备对MP4格式支持较好，但需要确认视频编码是否为H.264
  • 建议检查视频编码格式，可使用ffmpeg转换格式
  1. 视频地址问题：
  • 确保视频链接可公开访问且无防盗链
  • 尝试将视频下载到本地测试是否能播放
  1. 权限问题：
  • 确认AndroidManifest.xml已添加网络权限
<uses-permission android:name="android.permission.INTERNET"/>
  1. 代码调整建议：
  • 移除setTimeout延迟播放逻辑
  • 添加@ready事件监听确保视频准备就绪
<video
  ...
  [@ready](/user/ready)="onVideoReady"
></video>

methods: {
  onVideoReady() {
    this.play()
  }
}
回到顶部