原创 网页视频播放插件video
21 8 3402 0
有侵犯版权请及时联系我们,我们将在24小时内删除素材。
投诉举报

(1)demo1,在video标签里面直接设置

QQ截图20200407083756.png

html代码
注意:
①手机端点击后,播放会全屏播放,想要不全屏,只需要加入 playsinline即可,兼容更多浏览器可同时加入 x5-playsinline webkit-playsinline
②自适应屏幕,改变播放器大小 加入fluid="true"即可
<video id="video1" class="video-js" controls preload="auto" poster="file/1.png" fluid="true" data-setup="{}" x5-playsinline playsinline webkit-playsinline>
	<source src="file/video.mp4" type="video/mp4">
	<p class="vjs-no-js">
	不支持视屏播放哦
	</p>
</video>



(2)demo2,配置参数

QQ截图20200407083812.png

html代码
<video id="video2" class="video-js">

js代码
var options = {
	sources : [{
		src : "file/demo2.mp4",//这是要播放的视频文件
		type : "video/mp4"//这是视频类型
	}],
	controls : true,  //是否显示控制条,一般都要设置true,否则播放不正常
	playsinline: true,//设置为true则点击播放,手机端不会进入全屏,isFullscreen也可以设置,但大多数浏览器都屏蔽了isFullscreen
	height: 600,//播放器高度
	width : 300,//播放器宽度
	loop : false,//是否循环播放
	muted: false,//是否静音,好像不太好使,所以一般在准备播放前,进行设置this.volume(0);
	poster : "file/2.png",//视频封面图
	preload : "none",//预加载:auto自动加载、metadata加载元数据信息视频尺寸等、none不加载任何信息
	fluid : true,//自适应屏幕,改变播放器大小,这个比较好用,一般设置为true
	autoplay : false,//是否自动播放,大多浏览器都屏蔽了此功能
	isFullscreen : false//是否初始化时进入全屏,大多数浏览器屏蔽此功能
};
function onPlayReady() {
	this.volume(0.5);//音量调整0-1之间
	this.on("ended", function() {
		videojs.log("播放结束!");//类似console.log();
	})
}
videojs('video2', options, onPlayReady);



评论(0) 帮助他人、分享经验 我要评论
上传时间: 2020-04-11
分类: 代码 /  插件
文件大小: 22.62 MB
收藏
下载
请在Safari浏览器下载