Ios教程網 >> IOS使用技巧 >> IOS7技巧 >> Cordova實現視頻格式轉換插件（轉成mp4格式，iOS版）

Cordova實現視頻格式轉換插件（轉成mp4格式，iOS版）

編輯：IOS7技巧

Cordova提供了一組設備相關的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及為這些類庫所用的設備相關的原生後台代碼

本文演示如何開發一個自定義插件，來實現視頻格式的轉換。由於使用 iPhone 拍攝的視頻是 mov 格式的，為了讓視頻能夠在多平台下都能順利播放，我們實現一個將視頻轉換為 mp4 格式的自定義插件。

1，實現原理

（1）通過 AVAssetExportSession 我們可以實現視頻格式的轉換，除了轉成mp4編碼格式，還有很多其它格式可供選擇。
（2）除了編碼格式外，AVAssetExportSession 還可以設置各種壓縮質量。（本樣例使用高質量，即不對其壓縮。如果想要讓生成的視頻體積小點便於傳輸，可以使用低一些質量級別）

2，自定義插件的創建

我們隨便在本地建立一個文件夾（比如叫 HanggeMp4CovertPlugin），在裡面放置插件的相關功能實現代碼和配置文件。目錄結構如下：

下面分別介紹各個文件的內容和功能：

（1）HanggeMp4CovertPlugin.swift

import Foundation
import CoreLocation
import MobileCoreServices
import AssetsLibrary
import AVFoundation

@objc(HWPHanggeMp4CovertPlugin) class HanggeMp4CovertPlugin : CDVPlugin {

    //視頻轉換
    func covertVideo(command:CDVInvokedUrlCommand)
    {
        //返回結果
        var pluginResult:CDVPluginResult?
        //獲取參數
        let videoPath = command.arguments[0] as! String

        //獲取原視頻資源
        let videoURL = NSURL(fileURLWithPath: videoPath)
        let avAsset = AVURLAsset(URL: videoURL, options: nil)

        //獲取當前時間
        let now = NSDate()
        let dformatter = NSDateFormatter()
        dformatter.dateFormat = "yyyyMMddHHmmss"
        let fileName = "\(dformatter.stringFromDate(now))\(arc4random()%100)"
        //轉碼後的視頻保存路徑（tmp目錄下）
        let destinationPath = NSTemporaryDirectory() + "\(fileName).mp4"
        let newVideoPath: NSURL = NSURL(fileURLWithPath: destinationPath as String)

        //開始轉碼
        let exporter = AVAssetExportSession(asset: avAsset,
                                            presetName:AVAssetExportPresetHighestQuality)!
        exporter.outputURL = newVideoPath
        exporter.outputFileType = AVFileTypeMPEG4
        exporter.shouldOptimizeForNetworkUse = true
        exporter.exportAsynchronouslyWithCompletionHandler({
            print("轉換成功！")
            print("新視頻地址：\(newVideoPath.relativePath)")
            pluginResult = CDVPluginResult(status:CDVCommandStatus_OK,
                messageAsString: newVideoPath.relativePath)
            //發送結果
            self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
        })
    }
}

（2）hangge-mp4-covert-plugin.js

'use strict';

var exec = require('cordova/exec');

var HanggeMp4CovertPlugin = {

covertVideo: function(videoPath, onSuccess, onFail) {
return exec(onSuccess, onFail, 'HanggeMp4CovertPlugin', 'covertVideo', [videoPath]);
}

};

module.exports = HanggeMp4CovertPlugin;

（3）plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="hangge-mp4-covert-plugin"
    version="0.1">

    <name>HanggeMp4CovertPlugin</name>
    <description>This plugin use to covert video to mp4</description>

    <js-module src="hangge-mp4-covert-plugin.js">
        <clobbers target="window.HanggeMp4CovertPlugin" />
    </js-module>

    
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="HanggeMp4CovertPlugin">
                <param name="ios-package" value="HWPHanggeMp4CovertPlugin" />
            </feature>
        </config-file>
        <source-file src="src/ios/HanggeMp4CovertPlugin.swift" />
    </platform>
</plugin>

3，自定義插件的安裝

（1）由於插件是使用Swift語言寫的，首先在“終端”中進入到項目文件夾，並運行如下命令添加 Swift 支持插件：

cordova plugin add cordova-plugin-add-swift-support

（2）假設我們做的自定義插件是在用戶“文稿”目錄下，運行如下命令把這個插件添加到工程中來：

cordova plugin add ~/Documents/HanggeMp4CovertPlugin

（3）以後如果想移除這個自定義插件，運行如下命令即可：

cordova plugin rm hangge-mp4-covert-plugin

4，自定義插件的使用樣例

修改首頁 index.html 為如下內容。點擊按鈕後，首先會調用 MediaCapture 插件來拍攝錄制實現，錄制完畢後。會調用我們的自定義轉碼插件，將剛才錄制好的視頻轉換為 mp4 格式並保存到 tmp 目錄下。最後在頁面上顯示這個視頻的地址。

<!DOCTYPE html>
<html>
    <head>
        <title>Capture Video</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">

            function videoCapture() {
               //開始錄像（最長錄制時間：15秒）
               navigator.device.capture.captureVideo(onSuccess, onError, {duration: 15});

               //錄制成功
               function onSuccess(mediaFiles) {
                  var i, path, len;
                  //遍歷獲取錄制的文件（iOS只支持一次錄制一個視頻或音頻）
                  for (i = 0, len = mediaFiles.length; i < len; i += 1) {
                    console.log(mediaFiles);
                     path = mediaFiles[i].fullPath;
                     console.log("錄制成功！\n\n"
                          + "文件名：" + mediaFiles[i].name + "\n"
                          + "大小：" + mediaFiles[i].size + "\n\n"
                          + "localURL地址：" + mediaFiles[i].localURL + "\n\n"
                          + "fullPath地址：" + path);

                      //將錄制好的視頻轉成mp4格式
                      covertVideoToMp4(path);
                  }
               }

               //錄制失敗
               function onError(error) {
                  alert('錄制失敗！錯誤碼：' + error.code);
               }
          }

          //將錄制好的視頻轉成mp4格式
          function covertVideoToMp4(videoPath) {
              HanggeMp4CovertPlugin.covertVideo(videoPath,
                  function(newPath) {
                      alert("轉碼成功！地址：" + newPath);
                  },
                  function(errorMessage){
                      alert("視頻轉碼失敗："+errorMessage);
                  });
          }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="videoCapture();">錄像並生成mp4視頻</button>
    </body>
</html>

上一頁:Swift將字符串拆分成數組的例子
下一頁:Swift修改搜索條（UISearchBar）中取消按鈕的文字、顏色

IOS7技巧

iphone6鈴聲如何設置?蘋果6鈴聲設置方法(IOS8) iphone6鈴聲如何設置?蘋果6使用的是ios8系統這款系

蘋果5s DNS怎麼設置?蘋果手機Dns設置圖解我們以常會在一些文章中介紹說如果手機不能上網了我們可以設置一

蘋果iPhone5s手機如何看網速？本文章分別介紹測試無線wifi網速技巧與測試3G網絡網速技巧

IOS使用技巧

IOS7技巧 IOS8技巧 IOS9技巧 IOS10技巧 IOS技巧綜合 IOS6技巧蘋果技巧知識錯誤代碼解答

Swift 視頻錄制之調用攝像頭錄像，並保存到系統相冊例子