如何将embed嵌入式Flash网页播放器替换为CKplayer
生活随笔
收集整理的這篇文章主要介紹了
如何将embed嵌入式Flash网页播放器替换为CKplayer
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
工作中,經常遇到CMS里內嵌的使用embed標簽的Flash網頁播放器,這些播放器交互性差、不好用,但是因為embed標簽往往已通過富文本編輯器寫入了數據庫的內容字段,很難去改寫。如何在不改變數據庫的情況下,快速將其替換為好用的CK播放器呢?以下是我的做法,貼出來供大家參考。
1.引入JQuery和CKplayer相關文件。要說明的是,引入JQuery主要是為簡便操作網頁元素,如果通過原生JS實現網頁元素操作,也可以不引入JQuery。CKplayer此處使用6.8版本,如何使用,參見?http://www.ckplayer.com/manual,此處不多介紹。主要代碼如下:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> <script src="https://gitee.com/niandeng/ckplayer/blob/master/ckplayer/ckplayer.js">2.將embed標簽替換為CK播放器(可以實現多個embed同時替換)。代碼如下:
<script> jQuery(document).ready(function($){// 遍歷多個embed標簽$("embed").each(function(i){// 增加CKplayer容器,刪除embed$(this).after($("<div id='video" + i + "'></div>")).remove();// 獲取視頻URLvar url = $(this).attr('src');//設置自動播放參數var autostart = 0;if($(this).attr('autostart') == 'true'){autostart = 1;}// 設置視頻尺寸var width = 800;var height = 450;if(typeof($(this).attr('width')) != 'undefined' && typeof($(this).attr('height')) != 'undefined'){width = parseInt($(this).attr('width'));height = parseInt($(this).attr('height'));}// 設置CKplayer參數,添加播放器if(url){// CKplayer6.8var flashvars = {f: url,c: 0,b: 1,p: autostart};var params = {bgcolor: '#FFF',allowFullScreen: true,allowScriptAccess: 'always',wmode: 'transparent'};// ckplayer.swf 主要是為不支持html5的網頁準備,此處路徑根據具體位置調整CKobject.embedSWF('/img/ckplayer.swf', 'video'+i, 'ckplayer_video'+i, width, height, flashvars, params);var video = [url + '->video/mp4'];var support = ['all'];CKobject.embedHTML5('video'+i, 'ckplayer_video'+i, width, height, video, flashvars, support);}}); }); </script>?
總結
以上是生活随笔為你收集整理的如何将embed嵌入式Flash网页播放器替换为CKplayer的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《软件体系结构》 第十章 软件产品线体系
- 下一篇: 字节跳动2019春招第二次笔试编程题