修復video標簽在safari中無法播放mp4視頻的問題

前言

近期一個站長聯(lián)系我,向我求救解決一個bug凄诞,該問題在網(wǎng)絡上很多遇到圆雁,但是沒有正常的解決方案。
特此記錄下帆谍。

問題

該站長有一個discuz論壇摸柄,其中在帖子中發(fā)布視頻時,如果添加的視頻地址是其他站點的地址或者圖片下的視頻路徑既忆,可以正常播放。

如果使用附件中地址嗦玖,則異常患雇。

image.png

其中無法播放的地址的代碼如下

<video   controls="controls" width="100%" >
                <source src="forum.php?mod=attachment{$is_archive}&aid=$aidencode" type="video/mp4"></video>

原因

safari瀏覽器,在打開視頻的時候宇挫,他不是一次性請求全部文件的苛吱,一般首先會請求0-1字節(jié),這個寫在request header的"range"字段中:range:'bytes=0-1'


image.png

chrome也會發(fā)送range器瘪,只不過它是這樣的: 'bytes=0-'翠储,表示可以一次性加載整個視頻文件绘雁。

image.png

如果是想要傳輸視頻,必須要解析range字段援所,然后按照range字段的要求返回對應的數(shù)據(jù)庐舟,同時response header至少要包含三個字段:"Content-Type", "Content-Range", "Content-Length"
"Content-Type"必需明確指定視頻格式,有"video/mp4", "video/ogg", "video/mov"等等住拭。
"Content-Range"格式是 "bytes <start>-<end>/<total>"挪略,其中start和end必需對應request header里的range字段,total是文件總大小滔岳,不是返回的數(shù)據(jù)長度
"Content-Length"指定返回的二進制長度

這里需要注意:所有的end是指inclusive end杠娱,意味著文件長度如果是245,返回"Content-Range"就是"bytes 0-244/245"谱煤,錯一點視頻就放不出來了摊求。

如果你的視頻文件可以被直接訪問,則以上解析工作是由nginx來處理的刘离。你無需處理,通呈也妫可以正常播放。

如果你的視頻是編碼輸出的寥闪,例如需要php或者java等讀取二進制流太惠,則需要手動處理。

解決

php針對range解析視頻流的代碼如下:

$total = filesize($filename);
        if(isset($_SERVER['HTTP_RANGE'])) {
            $range = str_replace('=','-',$_SERVER['HTTP_RANGE']);
            $range = explode('-',$range);
            if (isset($range[2]) && intval($range[2]) >0){
                $end = trim($range[2]);
            }else{
                $end = $total-1;
            }
            $start = trim($range[1]);
            $size = $end-$start+1;
            header('Content-Length:'.$size);
            header('Content-Range: bytes '.$start.'-'.$end.'/'.$total);
        } else {
            $size = $total;
            header('Content-Length:'.$size);
            header('Content-Range: bytes 0-'.($total-1).'/'.$total);
        }
        header('Accenpt-Ranges: bytes');
        header('Content-Type: video/mpeg4');
        $fp = fopen($filename,'rb+');
        fseek($fp,$start);
        while(!feof($fp)) {
            print(fread($fp,$size));
            flush();
            ob_flush();
        }
        fclose($fp);
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疲憋,一起剝皮案震驚了整個濱河市凿渊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缚柳,老刑警劉巖埃脏,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異秋忙,居然都是意外死亡彩掐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門灰追,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堵幽,“玉大人,你說我怎么就攤上這事弹澎∑酉拢” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵苦蒿,是天一觀的道長殴胧。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么团滥? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任竿屹,我火速辦了婚禮,結果婚禮上灸姊,老公的妹妹穿的比我還像新娘拱燃。我一直安慰自己膜宋,他們只是感情好昔字,可當我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著携狭,像睡著了一般夯膀。 火紅的嫁衣襯著肌膚如雪诗充。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天诱建,我揣著相機與錄音蝴蜓,去河邊找鬼。 笑死俺猿,一個胖子當著我的面吹牛茎匠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播押袍,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼诵冒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了谊惭?” 一聲冷哼從身側響起汽馋,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎圈盔,沒想到半個月后豹芯,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡驱敲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年铁蹈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片众眨。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡握牧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出娩梨,到底是詐尸還是另有隱情我碟,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布姚建,位于F島的核電站,受9級特大地震影響吱殉,放射性物質發(fā)生泄漏掸冤。R本人自食惡果不足惜厘托,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望稿湿。 院中可真熱鬧铅匹,春花似錦、人聲如沸饺藤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽涕俗。三九已至罗丰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間再姑,已是汗流浹背萌抵。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留元镀,地道東北人绍填。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像栖疑,于是被迫代替她去往敵國和親讨永。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容