javascript - 通過jquery動態的設置video src的值無法播放視頻？

問題描述

<p id='video-box'> <video controls> <source src='http://www.wxshucaidpc.com/wenda/3141.html'> </video></p><a href='javascript:;' src='http://www.w3school.com.cn/i/movie.mp4'>點擊</a> *{padding:0;margin:0;}#video-box{display:none;}$('.dj').on('click', function() { var src = $(this).data('src'); $('#video-box source').prop('src',src) $('#video-box').show();});

demo在這里https://jsfiddle.net/r9u1cn7o/作一個通過點擊不同的標簽彈出彈框播放相應的視屏，但是通過jquery成功的給src賦值了，但是不知道為什么播放不了？

問題解答

通過 jQuery 確實是給 source 的 src 賦值成功，從調試來看，瀏覽器并沒有去發起請求去獲得相應的視頻，而只是單純的將 a 標簽的 src 中的值賦值給 source 了。

但是如果這么做，瀏覽器就會去請求地址獲得視頻文件：

$('.dj').on('click', function() { var src = $(this).data('src'), sourceDom = $('<source src='http://www.wxshucaidpc.com/wenda/3141.html'+ src +''>'); $('#video-box video').append(sourceDom); $('#video-box').show(); // 自動播放 $('#video-box video')[0].play()});

因此，可以推斷出來的是，當 video 中存在 source 標簽的時候，瀏覽器渲染之后會自動去獲取地址，即便地址改變，瀏覽器也不會再去獲取地址。但是通過動態的插入 source 標簽的方式，可以觸發瀏覽器進行重排，從而去獲取相應地址的文件進行播放。

<video> <source src='http://www.wxshucaidpc.com/wenda/xxx.mp4'/> <source src='http://www.wxshucaidpc.com/wenda/xxx.ogg'/></video>

source 里的 src 只會在渲染的時候被 check 一次.要動態調整 src , 你應該從 video 入手, 改成這樣應該就沒問題了$('#video-box video').prop('src',src)

別用source標簽，直接寫到video標簽里；另外用attr()吧。還有就是video標簽的width和height別寫到style里，拿出來~

jsfidle不能嵌入視頻. 換到本地就好了

video標簽支持的視頻格式有（1）H.264編碼的mp4文件（2）webm（3）ogg 其他后綴的文件因為專利等問題暫時不支持，可以考慮轉碼試試

加個play()事件就好了