video.js+jquery+視訊雲

李尚發表於2017-05-23
IDEJSjQuery

在做視訊相關專案的時候，出現了一些問題，專案中解決了，在這裡寫個總結：

出現的問題：
1.百度ueditor帶的視訊上傳，在前端顯示的時候總是帶有下載按鈕，video.js裡面的controls也不好去掉。
2.後臺新增視訊的時候，php.ini有upload_max_filesize，在用虛擬空間的時候，這個不能調，無法上傳過大的檔案。
3.放在虛擬空間後，視訊無法播放，不支援流媒體
解決辦法
1.無論用不用百度ueditor傳視訊，若想禁掉下載按鈕，可用：
<!--去掉下載按鈕-->
<style type="text/css">
    video::-webkit-media-controls-enclosure {
        overflow:hidden;
    }
    video::-webkit-media-controls-panel {
        width: calc(100% + 30px);
    }
</style>
<!--去除右鍵事件-->
$("video").live("contextmenu",function(){//取消右鍵事件
    return false;});

<!--另一種，實在不行就在body裡面加-->
<script type="text/javascript">
$(`div`).bind("contextmenu", function(e){ return false; })
</script>

<!--或者禁掉整個body的右鍵-->
<body oncontextmenu=self.event.returnvalue=false>
2.若想做到不限制視訊上傳的大小，可用如下解決方法:
    （1）用伺服器。設定php.ini的upload_max_filesize
    （2）虛擬空間，問服務商能否給設定
    （3）用視訊雲服務商，有免費的，這裡就不打廣告了
        a.在後臺加上一個多媒體連結的<input>，用來給使用者填寫多媒體的地址（這個的獲得在b裡面講），填上去，傳給後臺，把地址存入資料庫，前臺用video.js取出來就可以看了。
        b.用視訊雲，一般免費提供一些空間，我用的是免費10G的，在這就不打廣告了。在這裡可以上傳視訊、音訊，上傳後會有一個地址，這個地址填在a裡的<input>裡即可。

3.web.gonfig做相應配置，放在根目錄裡

<configuration>
    <system.webServer>
    <staticContent>
      <remove fileExtension=".mp4" />
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    </staticContent>
 </system.webServer>
</configuration>
        
**主要是寫給自己看的，有什麼問題的話，大家可以一起交流，麼麼噠**

相關文章