前端实现视频在线预览

这里介绍两种视频在线预览的方式。

西瓜视频播放器

网站地址


这里有一个在线生成工具是特别好用的,可以根据自己的要求选择配置功能。
前端实现视频在线预览_第1张图片
实例代码

<!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

资源地址

下载解压后即可使用,需要的资源文件已经包含在内了。

你可能感兴趣的:(项目,前端,音视频,javascript)