前端实现视频在线预览
这里介绍两种视频在线预览的方式。
西瓜视频播放器
网站地址
这里有一个在线生成工具是特别好用的，可以根据自己的要求选择配置功能。
实例代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui"><meta name="referrer" content="no-referrer"><title>xgplayer</title><style type="text/css">html, body {width:100%;height:100%;margin:auto;overflow: hidden;}</style>
</head>
<body>
<div id="mse"></div>
<script src="js/index.js" charset="utf-8"></script>
<script>let player = new Player({"id": "mse","url": "https://domhttp.kksmg.com/2022/06/07/h264_720p_600k_36956-pudongtv-20220607191600-4800-270120-600k_mp4.mp4","playsinline": true,"whitelist": [""],//播放窗口的大小"width": 660,"height": 337,//视频的封面"poster": "https://img-blog.csdnimg.cn/b1b6cd6e0aef4e528d8fcbbf2833e115.png",//视频旋转"rotate": {"clockwise": true,"innerRotate": true},//倍速设置"playbackRate": [0.5,1,1.5,2],//是否支持下载"download": true,"keyShortcut": "on","x5-video-orientation": "landscape","x5-video-player-fullscreen": "true"});</script>
</body>
</html>tips:这里引入了一个js文件index.js,这个文件直接从官网下载即可。可以按住F12查看请求这个文件的url然后就可以获取这个文件。
使用Video.js
资源地址
下载解压后即可使用,需要的资源文件已经包含在内了。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！