最近幫別人搜尋html5 player相關的問題，在網上查看了一些資料。整理一下網上搜到的一些關於

Javascript實現H.264視訊流播放，視訊截圖功能的連結。因為我不是從事前端開發相關的工作，

對前端相關的知識瞭解有限，所以無法提供現成的解決方案，或者準確定位最合適的1-2個連結。

只能把看上去還可以的連結儲存下來，以作記錄：

(1) 視訊直播

（2）視訊截圖

其實有些連結內容是類似的，比如 通過canvas實現 視訊截圖。 但我還是把連結記錄下來了。

（3）直播錄影

     從邏輯上分析，當用戶選擇“錄影“操作時，可以通過獲取h.264直播流，處理資料的時候，將data buffer

複製一份，並儲存。待使用者選擇“結束錄影”操作時，進行編碼（如MP4格式）以及儲存為錄影檔案的動作。

     網上搜索到解決辦法，主要分為兩種： WebRTC 和 MediaRecorder。 但存在的問題是，一些瀏覽器（如Safari），

或者舊的瀏覽器（chrome, firefox）可能不支援。

通過網頁和回覆，發現了2個關於示例程式碼的Github連結：

這個連結上附上了程式碼。為了防止連結失效，我將程式碼也一併轉過來了。答主借鑑了一下連結：

SegmentFault ：  https://segmentfault.com/q/1010000011489899

git官方  ：    https://github.com/streamproc/MediaStreamRecorder

建議大家去 連結的原始地址 檢視 。

<video width="100%" height="480" id="myVideo"></video>

</div>

<button onclick="videolz()" type="button"  class="btn btn-danger" style="width: 100%; font-size: 32px"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true" id="videostr">視訊描述</span></button>

//  判斷瀏覽器
var root ="<%=basePath %>";
var aa = '' ; //防止兩次上傳
var mediaRecorder ;
var index=1;//定時加1 	        
var dingshi;
var mediaConstraints = { audio: true, video: { width: 1280, height: 720 } }; 

function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
}
function onMediaError(e) {
   
}
function onMediaSuccess(stream) {
	 var video = document.querySelector('video');
	      //  賦值 video 並開始播放
	      video.srcObject = stream;
	      video.onloadedmetadata = function(e) {
	        video.play();
	      };
	      mediaRecorder = new MediaStreamRecorder(stream);
	      mediaRecorder.stream = stream;
	     /*    //  錄影api的呼叫 */
	            mediaRecorder.mimeType = 'video/mp4';
	          dingshi = window.setInterval(function(){ 
	        	$("#videostr").html("儲存視訊"+index+"秒");
	        	index++;
	        }
	        ,1000);  
	         
	        mediaRecorder.start(12000000000);
	        //  停止錄影以後的回撥函式
	      
	        mediaRecorder.ondataavailable = function (blob) {
	            if(aa == ""){
	            	 var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.mp4', {
	                     type: 'video/mp4'
	                 });
	                 var formData = new FormData();
	                 formData.append('file', file);
	                 console.log(formData);

	            	$.ajax({
						url :  root+"/upload/video.do",
						type : "post",
						cache : false,
						data: formData,
						dataType : "json",
						processData: false,
						contentType: false,
						error : function() {
							alert("暫時無法操作，請重新整理後再試！");
						},
						success : function(result) {
							
							if (result.code == 0) {
								var params = result.data;
								console.log(params);
								console.log(params.fileUrl);
								/* $("#lzvideo").attr("src", params.fileUrl); */
								
							} else {
								
							}
						}
					}); 
	            	
	            aa = blob;
	            }
	        };
}

	       function videolz(){
	        	if( $("#videostr").text()=="視訊描述"){
	        	$("#videostr").html("儲存視訊");
	        	$("#videostr").removeClass("glyphicon-facetime-video");
	        	$("#videostr").addClass("glyphicon-pause")
	        	/* $("#videos").append("<video width=\"100%\" height=\"320px\" id=\"myVideo\"></video>") */
	        	 //  開始錄影
	        	 $("#myVideo").show();
	        	captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

	        	}else{
	        	$("#videostr").html("視訊描述");
	        	$("#videostr").addClass("glyphicon-facetime-video");
	        	$("#videostr").removeClass("glyphicon-pause") 
	        	/*  $("#myVideo").remove();  */
	       //  停止錄影
	 	         /*  mediaRecorder.stop(); */
	          mediaRecorder.stream.stop();
	        	/*  $("#myVideo").unbind(); */
	 	      
 	 	      	index=1;
 	        	window.clearInterval(dingshi); 
	        	}
	   
	        }
 	        


</script>

	/*
	 * 上傳視訊
	 */
	@RequestMapping(value="video") 
	@ResponseBody
	public Result uoloadVideo(@RequestParam("file") MultipartFile file,Model model,HttpServletRequest request, HttpServletResponse response) {
	
		Result result = new Result();
		Map<String, Object> data = new HashMap<String, Object>();
		String serverPath = "/upload/" + new SimpleDateFormat("yyyyMM").format(new Date()) + "/";
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
		String filePath = request.getSession().getServletContext().getRealPath(serverPath);
		String fileName = UUID.randomUUID().toString().replaceAll("-", "") + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
		String fileUrl = request.getContextPath() + serverPath + fileName;

		File targetFile = new File(filePath, fileName);
		if (!targetFile.exists()) {
			targetFile.mkdirs();
		}

		try {
			file.transferTo(targetFile);
			System.out.println(basePath);
			data.put("fileUrl", basePath+fileUrl);
			result = new Result(0, "上傳成功", data);
		} catch (Exception e) {
			result = new Result(1, "上傳異常");
		}

		return result;
	
	}