在 html5 phonegap 上加载视频失败答案

【问题标题】：Loading video failed on html5 phonegap在 html5 phonegap 上加载视频失败
【发布时间】：2013-09-25 14:32:07
【问题描述】：

我想在 phonegap android 上通过 HTML5 视频标签显示本地视频这段 html 代码有什么问题？：

<video controls width="300" height="300">
 <source src="file:///android_asset/www/data/video.m4v">
 <source src="file:///android_asset/www/data/video.webm">
</video>

它不起作用，视频无法播放。

它也不起作用：

<video controls width="300" height="300"><source src="data/video.m4v"><source src="data/video.webm"></video>

但是当我从远程服务器加载视频时效果很好（我从服务器加载相同的视频文件）：

<video controls width="300" height="300">
     <source src="http://192.168.1.140/video.m4v">
     <source src="http://192.168.1.140/video.webm">
</video>

我构建它并在 Android 上运行。

【问题讨论】：

标签： android html video cordova

【解决方案1】：

我找到了另一种在android中获取路径的方法。将视频放在“res”文件夹中，并将视频播放器src设置为“android.resource://your.package.name/raw/videofilename”。不要放视频扩展名。在 IOS 中，您可以将其放在 assets 文件夹中并以“foldername/videoName.mp4”的形式访问它。虽然它是旧帖子，但我希望它会对某人有所帮助。

注意：“raw”是“res”文件夹中的文件夹名称，我以前是在Android中保存视频文件的。

【讨论】：

这对我不起作用，当视频尝试加载该网址时，它会显示“加载资源失败”
在哪个平台（Android 或 IOS）？可以请您显示视频 src 吗？那只有我能猜到问题了。
Android 4.4.2，我使用的是完全相同的 url 'android.resource://your.package.name/raw/videofilename'，但它没有加载。我的视频在platforms/android/res/raw/videofilename.mp4
你需要根据你的包名写url。假设你的包名是“com.example.activity”，那么你必须写“android.resource://com.example.activity/raw/videofilename”。 “videofilename”是要播放的视频文件的名称。

【解决方案2】：

视频文件是您应用的一部分吗？如果是这样，您的 src 字符串是错误的。就像您在应用程序的根文件夹中一样建立 src。因此，如果您有 root（您的 index.html 文件所在的位置）然后是视频，然后是您的视频文件，您将使用 <source src="videos/video.m4v">

编辑：

试试这个：

<video width="320" height="240" controls>
    <source src="data/video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

注意：m4v，据我所知，它不是受支持的视频格式。仅支持 mp4、ogg 和 webm。另外，添加“您的浏览器不支持视频标签”。查看您的设备是否存在支持问题。

【讨论】：

我已经更新了我的问题，即不起作用
还是不行：

【解决方案3】：

为您的应用程序创建一个文件夹并将视频保存在那里。假设 APP_FOLDER_ 是该文件夹的所需名称； APPLICATION_WORKING_DIR_ 是对根目录的全局引用，vid 是视频的名称：

/*code to create the app's folder*/
var onFileSystemRequestSuccess = function(fs) {
    //success fn create dir
    var onDirCreateSuccess = function(dir) {
        //fs instance pointing to root dir
        APPLICATION_WORKING_DIR_ = dir;
    };
    //fail fn
    var onDirCreateFail = function(err) {
        //manage error
    };
    fs.root.getDirectory(APP_FOLDER_, { create: true, exclusive: false }, onDirCreateSuccess, onDirCreateFail);
};
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemRequestSuccess, function () { });

然后，只需将video标签的src指向：

/*code to set src of video tag*/
//additional: check if APPLICATION_WORKING_DIR_.fullpath ends with "/" and create the path to video
var str_path = (APPLICATION_WORKING_DIR_.fullPath.toString().endsWith('/') ? APPLICATION_WORKING_DIR_.fullPath : APPLICATION_WORKING_DIR_.fullPath + '/') + vid;
document.getElementById('video_tag_name').src = str_path;

最后，点击元素开始播放。

希望这会有所帮助。

【讨论】：