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

【问题标题】：Changing HTML5 video src dynamically on Android?在 Android 上动态更改 HTML5 视频 src？
【发布时间】：2017-12-21 15:05:35
【问题描述】：

我有以下代码在 Android 设备上加载本地视频并将其放置在 HTML5 Video 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 代码：

<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); 时，我得到的确切 URL 是：

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 标签时，视频无法播放，这很奇怪。

【问题讨论】：

是你的js在ready块中还是放在你的html下面，以确保它在html渲染之前不会运行？
@chiliNUT，上面的javascript只会在按钮点击时触发，并且按钮只有在html渲染完成后很长时间才可用。
那么也许你可以提供一个更完整的代码示例
@chiliNUT，这就是我拥有的所有代码......唯一的区别是我没有将它包裹在 $(document).on('click','.backit', function (e){......});
和之前一样的问题，你是否在渲染之前将点击事件绑定到.backit

标签： javascript android jquery html video

【解决方案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();

【讨论】：