The documentation for this can be a bit confusing - it can look like it is not possible to dynamically change the source (https://html.spec.whatwg.org/multipage/embedded-content.html): 如果已将源元素及其属性动态插入视频或音频元素中,则对其进行动态修改将无效.要更改正在播放的内容,只需直接在media元素上使用src属性,可能使用canPlayType()方法从可用资源中进行选择.通常,在解析文档后手动操作源元素是不必要的复杂方法. Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach.但是,可以对其进行更改,并且以下代码段应在浏览器中可靠地运行-video.load()行是关键,因为它实际上确保插入了新的源.您可以通过注释掉这一行并观察差异来进行试验:However, it can be changed and the code snippet below should work reliably cross browser - the video.load() line is key as it actually makes sure the new source is inserted. You can experiment by commenting out this line and seeing the difference:var video = document.getElementById('video');var source = document.createElement('source');source.setAttribute('src', 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4');video.appendChild(source);video.play();function changeSource() { video.pause(); source.setAttribute('src', 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'); video.load(); //This step is key video.play();}<h1>Video source change test</h1><p><button id="sourceButtom" onclick="changeSource()">Click me to change the video source.</button><p><video id="video" width="320" controls height="240"></video>以上内容基于此处的出色答案: https://stackoverflow.com/a/18454389/334402The above is based on the excellent answer here: https://stackoverflow.com/a/18454389/334402 这篇关于更改源参数后,MP4在移动设备上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
07-24 09:24
查看更多