logo标签列表

在MacOS Safari浏览器和iOS设备上，.mp4或.webm格式的网络摄像头录像无法播放。

javascriptiossafarimp4videojs-record
3
我通过VideoJS录制了一个视频。代码如下：
// Video recording via webcam
var videoMaxLengthInSeconds = 180;

// Inialize the video player
let videoBlob;
var player = videojs("myVideo", {
    controls: true,
    width: 720,
    height: 480,
    fluid: false,
    plugins: {
        record: {
            audio: true,
            video: true,
            maxLength: videoMaxLengthInSeconds,
            debug: true,
            videoMimeType: "video/mp4"
        }
    }
}, function() {
    // print version information at startup
    videojs.log(
        'Using video.js', videojs.VERSION,
        'with videojs-record', videojs.getPluginVersion('record'),
        'and recordrtc', RecordRTC.version
    );
});

// error handling for getUserMedia
player.on('deviceError', function() {
    console.log('device error:', player.deviceErrorCode);
});

// Handle error events of the video player
player.on('error', function(error) {
    console.log('error:', error);
});

// user clicked the record button and started recording !
player.on('startRecord', function() {
    console.log('started recording! Do whatever you need to');
});

// user completed recording and stream is available
// Upload the Blob to your server or download it locally !
let recording;
let recordingData;
player.on('finishRecord', function() {
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    recordingData = player.recordedData;
    videoBlob = player.recordedData.video;
    //let myblob = new Blob(player.recordedData, { type: "video/webm" });
    let objectURL = window.URL.createObjectURL(player.recordedData)
    let downloadButton = document.getElementById('downloadButton');
    downloadButton.href = objectURL;
    downloadButton.download = "Vlog.webm";
    //recording = new File(myBlob, 'vlog.webm')
    console.log(recording)
    console.log('finished recording: ', videoBlob);
});

// Sending recorder video to server
$('#postButton').click(function() {
    // Get form data
    form = document.querySelectorAll('#form');
    let formData = new FormData(form[0]);

    let disabled = document.getElementById("commentsDisable").checked
    console.log("Comments Enabled: " + disabled)
    formData.append('commentsDisabled', disabled);

    let selection = document.getElementById('categorySelect');
    let selected = selection.options[selection.selectedIndex].value;

    // Append selected category
    formData.append('category', selected)

    //Apend YouTube embed link
    if (ytUrl) {
        formData.append('ytlink', ytUrl)
    }

    // Append recordedBlob to form data as file
    if (recordingData) {
        console.log('Recording detected: ' + recordingData)
        formData.append('videoFile', recordingData, recordingData.name);
    }

    //Append video from local upload
    if (tempFile) {
        formData.append('videoFile', tempFile);
    }

    // Send POST request via AJAX to server
    $.ajax({
        type: "POST",
        url: "/make_vlog/",
        processData: false,
        contentType: false,
        data: formData,
        success: function(response) {
            alert(response);
            //location.href = "/vlogs";
        }
    });
});``

在服务器端，我有一个Django应用程序，将文件存储为.mp4并创建一个新的Vlog模型。
当我打开页面时，视频被加载并可以由所有浏览器播放。除了Safari和iOS设备无法播放该视频（格式不支持）。
当我上传文件而不是网络摄像头录制视频时。如果文件是有效的mp4视频（例如从这里：example_video），则该文件在每个设备和浏览器上都可以播放。
我认为问题在于我的js代码中的视频编码。同样的问题也会出现在.webm文件中。 当我下载webm，在VLC中将其转换为mp4并上传到服务器时，视频会正确播放。
有人有这样的问题经验吗？ 谢谢
1个回答
1
你需要将webm视频转换为mp4服务器端以在Safari中播放。
在基于Web的网络摄像头录制中，每个浏览器都保存特定的本地格式（mime类型）。Safari保存mp4 / mp3，而其他浏览器通常保存webm。 更改文件扩展名无效。您需要转换视频。
您可以使用ffmpeg将webm转换为mp4，服务器端进行转换。
Safari现在可以播放webm文件，但还存在其他问题。 - undefined
@MarkRogers 你有找到解决“其他问题”的办法吗？我目前正在尝试播放一些.webm视频文件，但是不知何故Safari在206 - Partial Content响应上报错。你对此有什么见解，或者还有其他阻碍你的问题吗？只是好奇，因为现在我要么花时间解决传输问题，要么全力以赴快速转码解决方案。 - undefined
@RyanHefner - 我最终选择了将视频转码为mp4文件容器，并使用webm编解码器（我想是VP8吧？）。因为iphone对webm文件的支持并不稳定，它在macos上表现良好，但在我的观点中并不适用于所有IOS设备。我曾经尝试过让webm在iphone上正常工作，但最终放弃了，选择了mp4文件容器，因为它在Safari以及其他浏览器中得到广泛支持。Webm在Safari之外的浏览器中得到了很好的支持，但ios iphone safari却有些问题。我认为这种情况可能会持续一两年，因为只有较新的iphone才能很好地支持webm。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接