前端实现视频在线预览

最新推荐文章于 2024-07-24 11:13:53 发布

北海冥鱼未眠

最新推荐文章于 2024-07-24 11:13:53 发布

阅读量1.2k

点赞数

分类专栏：项目文章标签：前端音视频 javascript

本文链接：https://blog.csdn.net/qq_45401910/article/details/125313179

版权

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

西瓜视频播放器

网站地址

在这里插入图片描述
这里有一个在线生成工具是特别好用的，可以根据自己的要求选择配置功能。

实例代码

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

资源地址

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

最低0.47元/天解锁文章

北海冥鱼未眠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端实现视频在线预览

这里介绍两种视频在线预览的方式。网站地址这里有一个在线生成工具是特别好用的，可以根据自己的要求选择配置功能。实例代码:这里引入了一个js文件,这个文件直接从官网下载即可。可以按住F12查看请求这个文件的url然后就可以获取这个文件。资源地址下载解压后即可使用,需要的资源文件已经包含在内了。index.html另外还可以使用最简单的html支持的视屏文件播放...
复制链接

扫一扫