Play video Files(播放视频)

本文介绍如何在iOS应用中使用MPMoviePlayerController和MPMoviePlayerViewController播放视频,包括视频播放器的初始化、播放控制及监听结束播放的方法。

1。实现:

   导入: #import <MediaPlayer/MediaPlayer.h>

   MPMoviePlayerController:可进行更加全面的视频显示设置,它没使用delegate,而是靠notification system

   MPMoviePlayerViewController:可以放入navigationController,简单实现全屏显示,

                               或是用presentMoviePlayerViewControllerAnimated进行模式窗口全屏显示


e.g.

#import <MediaPlayer/MediaPlayer.h>

#import <AVFoundation/AVFoundation.h>     /* AVAudioSession */


@property (nonatomic, strong)MPMoviePlayerController *moviePlayer;

//监听结束时

- (void) videoHasFinishedPlaying:(NSNotification *)paramNotification{

    /* 找出视频停止播放的原因 */

    NSNumber *reason =  paramNotification.userInfo [MPMoviePlayerPlaybackDidFinishReasonUserInfoKey];   

    if (reason != nil){

        NSInteger reasonAsInteger = [reason integerValue];      

        switch (reasonAsInteger){

            case MPMovieFinishReasonPlaybackEnded:{

                NSLog(@"The movie ended normally");

                break;

            }

            case MPMovieFinishReasonPlaybackError:{

                NSLog(@"An error happened and the movie ended");

                break;

            }

            case MPMovieFinishReasonUserExited:{

                NSLog(@" The user exited the player");

                break;

            }

        }        

        NSLog(@"Finish Reason = %ld", (long)reasonAsInteger);

        [self stopPlayingVideo:nil];

    }   

}

//开始播放视频 

- (void) startPlayingVideo:(id)paramSender{ 

   if (self.moviePlayer != nil){

        [self stopPlayingVideo:nil];

    }

    NSBundle *mainBundle = [NSBundle mainBundle]; 

    NSURL *url = [mainBundle URLForResource:@"Sample"  withExtension:@"m4v"]; 

    self.moviePlayer = [[MPMoviePlayerController alloc] initWithContentURL:url];  

    if (self.moviePlayer != nil){

        /*监听:结束播放 */

        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(videoHasFinishedPlaying:)

                                  name:MPMoviePlayerPlaybackDidFinishNotification object:self.moviePlayer];       

        NSLog(@"Successfully instantiated the movie player.");      

        /* 播放比例 */

        self.moviePlayer.scalingMode = MPMovieScalingModeAspectFit;     

       [self.view addSubview:self.moviePlayer.view]; //稍后需removeFromSuperview        

        [self.moviePlayer setFullscreen:YES   animated:NO];

        

        /* 当模拟器有声音,真机无声音时 需在启动播放器之前 加上以下这一句 */

       [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayback error:nil];


        [self.moviePlayer play];

    } else {

        NSLog(@"Failed to instantiate the movie player.");

    }

}

//停止播放

- (void) stopPlayingVideo:(id)paramSender { 

    if (self.moviePlayer != nil){

        //取消监听

        [[NSNotificationCenter defaultCenter] removeObserver:self 

          name:MPMoviePlayerPlaybackDidFinishNotification  object:self.moviePlayer];       

        [self.moviePlayer stop];      

        [self.moviePlayer.view removeFromSuperview];

    }  


postscript: 

  视频必须是H.264 file format



在 Vue 框架中使用 `video.js` 实现大视频文件上传与播放功能,可以结合后端(如 Spring Boot、ASP.NET 等)进行文件分片上传与流式播放。以下是一个完整的实现思路和关键代码示例。 ### 3.1 大视频文件上传的实现 由于大视频文件直接上传可能导致请求超时或失败,因此需要采用**分片上传**的方式处理: - 前端将视频文件切分为多个小块(chunk) - 将每个 chunk 分别上传到服务器 - 后端接收并拼接这些 chunk 最终合并为完整文件 #### 前端实现(Vue + Axios) ```vue <template> <div> <input type="file" @change="handleFileChange" /> <button @click="uploadVideo">开始上传</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { file: null, chunkSize: 5 * 1024 * 1024, // 5MB chunks: [], }; }, methods: { handleFileChange(event) { this.file = event.target.files[0]; }, async uploadVideo() { const totalChunks = Math.ceil(this.file.size / this.chunkSize); for (let i = 0; i < totalChunks; i++) { const start = i * this.chunkSize; const end = Math.min(start + this.chunkSize, this.file.size); const chunk = this.file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('chunkIndex', i); formData.append('totalChunks', totalChunks); formData.append('fileName', this.file.name); await axios.post('/api/upload/chunk', formData, { headers: { 'Content-Type': 'multipart/form-data' }, }); } await axios.post('/api/upload/merge', { fileName: this.file.name }); alert('上传完成'); }, }, }; </script> ``` #### 后端逻辑(Node.js 或 Spring Boot 示例) 后端需提供两个接口: 1. 接收每个 chunk 并保存 2. 所有 chunk 上传完成后进行合并 以 Node.js Express 为例: ```javascript const fs = require('fs'); const path = require('path'); app.post('/api/upload/chunk', (req, res) => { const { chunkIndex, totalChunks, fileName } = req.body; const filePath = path.join(__dirname, 'chunks', `${fileName}.part${chunkIndex}`); fs.writeFileSync(filePath, req.file.buffer); res.send({ success: true }); }); app.post('/api/upload/merge', (req, res) => { const { fileName } = req.body; const writeStream = fs.createWriteStream(path.join(__dirname, 'uploads', fileName)); for (let i = 0; i < totalChunks; i++) { const chunkPath = path.join(__dirname, 'chunks', `${fileName}.part${i}`); const data = fs.readFileSync(chunkPath); writeStream.write(data); fs.unlinkSync(chunkPath); // 删除 chunk 文件 } writeStream.end(); res.send({ success: true }); }); ``` ### 3.2 使用 video.js 实现视频播放 上传成功后,可通过 `video.js` 实现视频播放。推荐使用 `videojs-contrib-hls` 插件支持 HLS 流媒体格式,适合大文件流式播放[^3]。 #### 安装依赖 ```bash npm install video.js videojs-contrib-hls ``` #### Vue 组件中使用 video.js 播放视频 ```vue <template> <div> <video ref="videoPlayer" class="video-js vjs-default-skin" controls> <source :src="videoUrl" type="application/x-mpegURL" /> </video> </div> </template> <script> import videojs from 'video.js'; import 'video.js/dist/video-js.css'; import Hls from 'videojs-contrib-hls'; export default { props: ['videoUrl'], mounted() { const player = videojs(this.$refs.videoPlayer, { html5: { hls: { overrideNative: true, }, }, }); if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(this.videoUrl); hls.attachMedia(player.el()); hls.on(Hls.Events.MANIFEST_PARSED, () => player.play()); } }, beforeDestroy() { if (this.player) { this.player.dispose(); } }, }; </script> ``` ### 3.3 注意事项 - **跨域问题**:确保前端与后端接口处于同一域名下,或配置 CORS。 - **性能优化**:对于非常大的视频文件,建议使用 CDN 和流媒体协议(如 HLS、DASH)提升加载速度。 - **安全性**:限制上传类型、大小,并对上传路径进行权限控制。 - **进度条与错误处理**:可在上传过程中添加进度条反馈,并对失败的 chunk 进行重试机制。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值