Question

我有以下代码在Android设备上加载本地视频并将其放在HTML5视频src标记中：

Javascript代码：

var path = 'file:///data/data/com.myapp.app/files/';

var src = path+'Intro.mp4';
var video = $("#introVideo");

video.find("source").attr("src", src);

HTML code：

<video id="introVideo" width="100%" poster="poster.jpg"controls>
<source src="" type="video/mp4">
</video>

这不适用于Android设备。但是，如果我不使用上面的javascript代码并只使用如下所示的视频路径，一切正常：

这有效：

<video id="introVideo" width="100%" poster="poster.jpg"controls>
<source src="file:///data/data/com.myapp.app/files/Intro.mp4" type="video/mp4">
</video>

当我alert(src);时，我会得到确切的网址：

file:///data/data/com.myapp.app/files/Intro.mp4

这意味着该视频存在于本地，并且上面的我的Javascript代码存在问题。但我不明白这是什么问题！

有人可以就此问题提出建议吗？

提前致谢。

编辑：

以上代码就是这样的：

$(document).on('click','.backit', function(e){

    var path = 'file:///data/data/com.myapp.app/files/';

    var src = path+'Intro.mp4';
    var video = $("#introVideo");

    video.find("source").attr("src", src);

});

修改

进一步调查，我发现当我使用上面的javascript代码时，视频的src标签设置正确，但是，当我动态设置其src标签时视频无法播放，这很奇怪。

Answer 1

不知道你正在使用什么框架，我只是使用现有的加载HTML页面的简单Android应用程序对类似场景进行了快速测试，这对我有用（请注意，在运行时我的webview正在访问来自file:///android_asset/路径的资源，因为我的视频是项目的本地视频）：

HTML

<video id="vid" width="320" height="240"></video>

初始JS：

var path = 'file:///android_asset/';
var vid = document.getElementById('vid');
var src = document.createElement('source');

src.setAttribute('src', path + 'video1.mp4');

vid.appendChild(src);
vid.play();

将来源更改为新视频

src.setAttribute('src', path + 'video2.mp4'); 

vid.load();
vid.play();

在Android上动态更改HTML5视频src？

1 个答案: