javascript - 通過jquery動(dòng)態(tài)的設(shè)置video src的值無法播放視頻?
問題描述
<p id='video-box'> <video controls> <source src='http://m.4tl426be.cn/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/作一個(gè)通過點(diǎn)擊不同的標(biāo)簽彈出彈框播放相應(yīng)的視屏,但是通過jquery成功的給src賦值了,但是不知道為什么播放不了?
問題解答
回答1:通過 jQuery 確實(shí)是給 source 的 src 賦值成功,從調(diào)試來看,瀏覽器并沒有去發(fā)起請(qǐng)求去獲得相應(yīng)的視頻,而只是單純的將 a 標(biāo)簽的 src 中的值賦值給 source 了。
但是如果這么做,瀏覽器就會(huì)去請(qǐng)求地址獲得視頻文件:
$('.dj').on('click', function() { var src = $(this).data('src'), sourceDom = $('<source src='http://m.4tl426be.cn/wenda/3141.html'+ src +''>'); $('#video-box video').append(sourceDom); $('#video-box').show(); // 自動(dòng)播放 $('#video-box video')[0].play()});
因此,可以推斷出來的是,當(dāng) video 中存在 source 標(biāo)簽的時(shí)候,瀏覽器渲染之后會(huì)自動(dòng)去獲取地址,即便地址改變,瀏覽器也不會(huì)再去獲取地址。但是通過動(dòng)態(tài)的插入 source 標(biāo)簽的方式,可以觸發(fā)瀏覽器進(jìn)行重排,從而去獲取相應(yīng)地址的文件進(jìn)行播放。
回答2:<video> <source src='http://m.4tl426be.cn/wenda/xxx.mp4'/> <source src='http://m.4tl426be.cn/wenda/xxx.ogg'/></video>
source 里的 src 只會(huì)在渲染的時(shí)候被 check 一次.要?jiǎng)討B(tài)調(diào)整 src , 你應(yīng)該從 video 入手, 改成這樣應(yīng)該就沒問題了$('#video-box video').prop('src',src)
回答3:別用source標(biāo)簽,直接寫到video標(biāo)簽里;另外用attr()吧。還有就是video標(biāo)簽的width和height別寫到style里,拿出來~
回答4:jsfidle不能嵌入視頻. 換到本地就好了
回答5:video標(biāo)簽支持的視頻格式有(1)H.264編碼的mp4文件(2)webm(3)ogg 其他后綴的文件因?yàn)閷@葐栴}暫時(shí)不支持,可以考慮轉(zhuǎn)碼試試
回答6:加個(gè)play()事件就好了
相關(guān)文章:
1. python - 我在使用pip install -r requirements.txt下載時(shí),為什么部分能下載,部分不能下載2. mysql - 分庫分表、分區(qū)、讀寫分離 這些都是用在什么場(chǎng)景下 ,會(huì)帶來哪些效率或者其他方面的好處3. node.js - nodejs開發(fā)中常用的連接mysql的庫4. 網(wǎng)頁爬蟲 - python 爬取網(wǎng)站 并解析非json內(nèi)容5. mysql - jdbc的問題6. Python爬蟲如何爬取span和span中間的內(nèi)容并分別存入字典里?7. 視頻文件不能播放,怎么辦?8. mysql - 如何減少使用或者不用LEFT JOIN查詢?9. python - 編碼問題求助10. linux - python 抓取公眾號(hào)文章遇到驗(yàn)證問題
