JQuery/JavaScript-在iOS浏览器中更改视频src

<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
<video class="video videopreview">';
<source src="" type="video/webm" />';
</video>                    
</div>

$('.videopreview source').attr('src', 'https://file-examples.com/storage/fe783a5cbb6323602a28c66/2017/04/file_example_MP4_480_1_5MG.mp4');

这适用于PC和Android浏览器，但不适用于iOS，有什么想法吗？

"这适用于PC和Android浏览器，但不适用于iOS，有什么想法吗">

在苹果系统上，首选的视频格式是MP4而不是WebM
某些浏览器在使用(type="video/mp4"的(MP4文件时会原谅错误的type="video/webm"

尝试测试这个示例Javascript代码：
(这里没有用于测试的Apple设备，但它应该会提示您找到解决方案(。

<!DOCTYPE html>
<html>
<body>
<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
<video id="vidtest1" class="video videopreview">
<source src="" type="video/webm">
</video>                    
</div>
<script>
var vidPlayer;
//vidPlayer = document.getElementsByClassName("videopreview"); //If you prefer to access via Class name
vidPlayer = document.getElementById("vidtest1");
function clickVideo ( input )
{
alert("clicked Element was : " + input.className );
//alert("clicked Element was : " + input.id );

//# note: Do a "load()" after setting the "src" and correct format "type" ...

vidPlayer.src = "https://file-examples.com/storage/fe783a5cbb6323602a28c66/2017/04/file_example_MP4_480_1_5MG.mp4";
vidPlayer.type = "video/mp4";
vidPlayer.load();

}
</script>
</body>
</html>

请尝试

$('.videopreview').attr('src', 'https://file-examples.com/storage/fe783a5cbb6323602a28c66/2017/04/file_example_MP4_480_1_5MG.mp4');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="videoWrapper" onclick="clickVideo(this);" style="max-width: calc(100% - 2px);">
<video class="video videopreview" controls>
<source src="" type="video/webm" />
</video>
</div>

当源元素已插入视频或音频元素时，动态修改该元素及其属性将无效。要更改正在播放的内容，只需直接使用media元素上的src属性，可以使用canPlayType((方法从可用资源中进行选择。通常，在文档解析后手动操作源元素是一种不必要的复杂方法。

http://dev.w3.org/html5/spec/Overview.html#the-源元素

按照建议，您应该更改$('.videopreview')上的属性。您也可以尝试用新的视频标记替换元素，看看这是否会给您带来更好的效果。

相关内容

最新更新

热门标签：