今天有個朋友微信上說目前他們在做抖音短視頻的內容創作，方向是國家級非物質文化遺產「苗繡」，想在他們官方網站上增加短視頻的功能，將抖音的內容頁上傳到網站上。

其實這個功能并不復雜，只需要開通上傳視頻功能即可，看了下后臺使用的編輯器是 UEditor，目前沒有視頻上傳圖標，就通過調用 js 實現了編輯器里的視頻上傳圖標

UEditor 默認的視頻支持代碼

視頻上傳后自動視頻的代碼如下

<video class="edui-upload-video  vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="/public/uploads//video/20230813/1384690865630659.mp4" data-setup="{}">    

<source src="/public/uploads/video/20230813/1384690865630659.mp4" type="video/mp4"/>    

</video>

最大的問題就是無法自動播放，并且限定了視頻寬和高，原本豎形的視頻變成了橫形視頻，只在中間一塊播放，另外就是在為手動點播放，未播放時無法加載視頻寬高、封面圖、播放時間等信息，那么就需要解決這個問題。

自動播放及自適應大小代碼實現

PC 端相應簡單些，瀏覽器對 <video> 標簽的兼容還是很好的，但是想要在瀏覽器中當做 Banner 視頻自動播放就必須設置這些屬性來更好地實現；

<video muted autoplay="autoplay" loop="loop" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" >

<source src="indexMove.mp4" type="video/mp4">

</video>

同上面方法設置后，PC 網頁就可以實現自動播放了。

移動端，好像這個代碼也可以實現，至少 IOS13.4 的 safari 瀏覽器可以那就先這樣吧。

對 ueditor 上傳視頻代碼改造

接下來就是如何把 UEditor 里面進行替換了，對 UEditor 編輯器目錄進行查找，應該是 ueditor.all.js 這個文件

文件 ueditor.all.js

將

 str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +

 ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +

'<source src="' + url + '" type="video/' + ext + '" /></video>';

替換為

 str = '<video' + (id ? ' id="' + id + '"' : '') + ' muted ' + ' autoplay="autoplay"' + 'loop="loop"' + 'x5-playsinline="true"' + 'playsinline="true"' + 'webkit-playsinline="true"' + 'preload="auto"' + 'x5-video-player-type="h5"' + 'x5-video-player-fullscreen="true>' +

 '<source src="' + url + '" type="video/' + ext + '" /></video>';

實際測試發現不對，編輯器調用的是 ueditor.all.min.js 文件，我們繼續修改。

文件 ueditor.all.min.js

將

<video"+(g?' id="'+g+'"':"")+' class="'+k+' video-js" '+(f?' style="float:'+f+'"':"")+' controls preload="none" width="'+c+'" height="'+d+'" src="'+a+'" data-setup="{}"><source src="'+a+'" type="video/'+m+'" /></video>

替換為

<video"+(g?' id="'+g+'"':"")+' muted autoplay="autoplay" loop="loop" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true"'><source src="'+a+'" type="video/'+m+'" /></video>

OK 生效了。

結尾

這篇文章主要說的是 UEditor 的更換標簽，如果是普通網頁使用者使用以下代碼就可以了。

<video muted autoplay="autoplay" loop="loop" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" preload="auto" x5-video-player-type="h5" x5-video-player-fullscreen="true" >

<source src="indexMove.mp4" type="video/mp4">

</video>

官網地址：https://www.50yun.top

免費注冊：https://www.50yun.top/col-reg/

趕快注冊 - 創建自己的線上數字化運營系統吧