問題描述

<p id='video-box'> <video controls> <source src='http://www.piao2010.com/wenda/3141.html'> </video></p><a href='javascript:;' src='http://www.w3school.com.cn/i/movie.mp4'>點(diǎn)擊</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/作一個通過點(diǎn)擊不同的標(biāo)簽彈出彈框播放相應(yīng)的視屏，但是通過jquery成功的給src賦值了，但是不知道為什么播放不了？

問題解答

通過 jQuery 確實(shí)是給 source 的 src 賦值成功，從調(diào)試來看，瀏覽器并沒有去發(fā)起請求去獲得相應(yīng)的視頻，而只是單純的將 a 標(biāo)簽的 src 中的值賦值給 source 了。

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

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

因此，可以推斷出來的是，當(dāng) video 中存在 source 標(biāo)簽的時(shí)候，瀏覽器渲染之后會自動去獲取地址，即便地址改變，瀏覽器也不會再去獲取地址。但是通過動態(tài)的插入 source 標(biāo)簽的方式，可以觸發(fā)瀏覽器進(jìn)行重排，從而去獲取相應(yīng)地址的文件進(jìn)行播放。

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

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

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

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

video標(biāo)簽支持的視頻格式有（1）H.264編碼的mp4文件（2）webm（3）ogg 其他后綴的文件因?yàn)閷＠葐栴}暫時(shí)不支持，可以考慮轉(zhuǎn)碼試試

加個play()事件就好了