蛋疼的HTML5 半成品VIDEO，html5半成品video
故事有點長 喜歡搞HTML5 有耐心的童鞋可以看看
做過或者接觸過HTML5技術的同學們可能都清楚 HTML5這2年貌似很火的樣子 很多技術企業都紛紛像HTML5技術轉型 或者 希望用HTML5某些技術特點去解決生產中的一些功能 比如 WEB儲存 canvas 畫布 拖放drag 一些新穎的CSS3元素 audio/video 等等 有些東西還是挺好玩的
接下來我想說說我們的故事 由於我們要搞視頻網站 主推的是視頻的播放 當然公司領導看重了HTML5的 video 因為大家都知道 Flash是外掛程式 也有一些造成瀏覽器無響應 死機的一些問題 對於跨平台一直也有限制 貌似 IOS上不支援flash 所以我們選用了 部分瀏覽器去支援HTML5 對於一些不支援的瀏覽器我們推薦使用者去升級瀏覽器 在HTML5的官網上 有一些標準的支援瀏覽器的一些要求 比如 IE 9+ Firefox3.6+ 等等 經過這段時間的研究 我發現最讓我滿意的是 Google瀏覽器 對HTML5 video的支援是最好的
然而問題出來了 接著往下看 看看大家是否有遇到跟我同樣的問題 希望大家可以慷慨解囊 出來與童鞋我探討研究下這讓我陣子蛋疼的 HTML5
問題出現了： 大家注意
IE 10 或者 IE11 用了官網的canplaytype API 測試 是 support 但是不能播放VIDEO 有的 會直接無畫面 連播放器都不出來 有的會出現一個紅X 提示 此視頻格式無效 之類的 我就遇到了這蛋疼的二種問題
無論是本地 和 伺服器訪問 伺服器 訪問 我們也在應用伺服器 包括IIS 配置了 mime類型 video/mp4 Apache 不用說了 不需要配置好的
接下來研究的就不是 瀏覽器是否支援 HTML5 video的問題了 而是接下去 研究是否支援裡面的編碼 因為各種瀏覽器對視頻編碼支援不同 IE支援 H264 Firefox則支援 ogg 近日 發現最新版本的 Firefox 31版本 支援 H264編碼 有可能是 微軟與Firefox和諧的情境 難得啊 應該是 微軟支援了Firefox Firefox牛大了 自此以後 對HTML5 VIDEO的視頻格式支援的更多了 也代表對HTML5 video支援的更好了 但是我的問題還是沒有解決 為嘛 我的機器 和 我領導的本子 上裝的 IE11能夠播放 MP4(H264)的視頻 我個別同事的2台機器 播放不了 播放不了的這2個案例 還有差異 這更讓我噁心 蛋疼 同事一 是完全不支援 H264編碼 包括他最新版本的Firefox也不支援 canplaytype("video/mp4") 返回 空 同事二呢 canplaytype("video/mp4") 返回 probably “很可能支援” 就看到這個API 我就覺得噁心 支援就支援 不支援就不支援 但是他們也沒把這事說准了 而且 同事二的HTML5 WSC官網上 http://www.w3school.com.cn/html5/html_5_video_dom.asp 的頁面視頻播放不出來 但是 “親自試一試”http://www.w3school.com.cn/tiy/t.asp?f=html5_video_dom 這個頁面能夠播放出視頻 但是HTML測試文檔拿到本地 拿到應用伺服器 包括 視頻資源 拿到本地 拿到伺服器都Y得不好使 太讓我蛋疼了 我當時想砸了他電腦 但是忌於是公司財產我忍了
忘了說下一些前提以免有些童鞋說我問題描述不清晰 我和我同事的作業系統都是 WINDOWS SERVER 2008SR IE11 Firefox 30-31不等 我領導是WIN7 IE11
我們找了好多的網站資料 包括 msdn 但是對HTML5 VIDEO的探討資料太少了 讓我們很無奈 我的同事一為了配合我 重裝了2遍IE瀏覽器 從IE11 到 IE10 又到 IE11 還是不支援H264編碼 不能播放 後來研究到是不是 這個H264編碼 是不是跟瀏覽器無關 是作業系統提供的編解碼工具 我狠心的讓他重裝了系統為支援我那偉大的事業 結果大家想到了 就是一悲劇 故事先到這吧 有時間還是要繼續深入研究下去 找到問題的本質 有訊息了再告訴大家 記住 no zuo no die
下午終於有突破了 在關於 WIN SERVER 2008 SR的系統上 現在的我不能保證所有 意外情況的發生 但是 經過這段時間的潛心研究 會解決一些系統上 本該支援HTML5缺不能播放的技術方案 關於2008 不能播放 在這裡透漏 三個點 一個是 伺服器管理裡面的配置 二是 瀏覽器安全設定 三是 預設2008缺少一個 安裝包 說起來有點麻煩 有遇到問題的童鞋可以留言來諮詢
HTML5是HTML的最新標準，雖然還不是很完善，但是有些瀏覽器已經支援HTML5的某些特性了。目前，FIREFOX,OPERA,CHORME和IE9都支援HTML5，可是IE6-IE8就不支援了。因為360，遨遊，世界之窗那些的都是用IE的核心，實際上就跟IE差不多，所以呢也是不支援HTML5的。
html5怎更改video的src屬性
<!DOCTYPE html>
<html>
<head>
<title>test video</title>
<script src="code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<input type="text" placeholder="enter video url to play." id="t_url">
<input type="button" value="play" id="t_btn">
<video src="movie.ogg" controls="controls" autoplay="false" id="v_video" preload='no'>
您的瀏覽器不支援 video 標籤。
</video>
</div>
<script type="text/javascript">
$(function(){
$("#t_btn").click(function(){
if(!$("#t_url").val()){
alert("url不可為空.");
}else{
$("#v_video").attr("src",$("#t_url").val());//更新url
$("#v_video").attr("autoplay","true");//直接播放
}
});
});
</script>
</body>
</html>
已實測，chrome完美實現，更新後直接播放，請採納！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
