使用video.js播放手机本地视频

最新推荐文章于 2024-04-18 06:45:00 发布

BruthYU

最新推荐文章于 2024-04-18 06:45:00 发布

阅读量5.3k

点赞数

文章标签： HTML video.js javascript

本文链接：https://blog.csdn.net/BruthYU/article/details/102939083

版权

一、开发背景简介
项目要求调用手机本地相册的视频并在web页面上展示，但是原生的video标签并不能做到很好的兼容性，所以使用第三方库video.js调用手机本地视频并播放。

二、video.js的引入

//在head部分加上以下两行代码即可
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

三、代码展示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
	</head>

	<body>
		<label>选取视频</label>

		<br>
		<input type="file" id='videoUp' accept="video/mp4">
		<!--video用于显示媒体设备的视频流，自动播放-->
		<video id="video" class="video-js  vjs-default-skin" controls="controls" autoplay="autoplay" preload="metadata" muted="muted" x5-playsinline="" playsinline="" webkit-playsinline="">调用手机相册</video>
		<br />

		<script type="text/javascript">
			function getObjectURL(file) {
				var url = null;
				if(window.createObjcectURL != undefined) {
					url = window.createOjcectURL(file);
				} else if(window.URL != undefined) {
					url = window.URL.createObjectURL(file);
				} else if(window.webkitURL != undefined) {
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
			//jquery代码
			$(function() {
				//单文件上传
				$("#videoUp").on("change", function() {
					//$(this)[0] 等价于$(this).get(0)，将 JQuery 对象转为 DOM 对象，files 为其属性，得到的是一个文件对象数组
					var files = $(this)[0].files;
					if(files.length > 0) { //未选中文件时，长度为0
						var file = files[0]; //因为是单文件上传，所以只有一个文件（File）对象
						
						var video = document.getElementById("video");
						
						var objURL = getObjectURL(this.files[0]); //这里的objURL就是input file的真实路径
						
						var option = {
							muted: true,
							controls: true,
							height: 320,
							width: 170,
							loop: false,
							// 更多配置.....
						};
						
						var source = [{
							type: "video/mp4",
							src: objURL
						}]
						
						var player = videojs('video', option, function onPlayerReady() {
							this.src(source);
							this.autoplay();
						});
					}
				});
			});
		</script>
	</body>

</html>

BruthYU

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
使用video.js播放手机本地视频

一、开发背景简介项目要求调用手机本地相册的视频并在web页面上展示，但是原生的video标签并不能做到很好的兼容性，所以使用第三方库video.js调用手机本地视频并播放。二、video.js的引入//在head部分加上以下两行代码即可<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js....
复制链接

扫一扫