跳至主要內容

html

OrangBus大约 7 分钟

css

样式排版

https://github.com/sofish/Typo.css

获取视频时长

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="{{ mix("css/app.css") }}">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form action="@">
                <input type="file" id="video">
                <div id="infos"></div>
{{--                <button type="button" id="submit" class="btn btn-success btn-block">上传</button>--}}
            </form>
        </div>
    </div>
</div>
<script src="{{ mix("/js/app.js") }}"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    
    var myVideos = [];

    window.URL = window.URL || window.webkitURL;

    document.getElementById('video').onchange = setFileInfo;

    function setFileInfo() {
        var files = this.files;
        myVideos.push(files[0]);
        var video = document.createElement('video');
        video.preload = 'metadata';

        video.onloadedmetadata = function() {
            window.URL.revokeObjectURL(video.src);
            var duration = video.duration;
            myVideos[myVideos.length - 1].duration = duration;
            updateInfos();
        }

        video.src = URL.createObjectURL(files[0]);
    }

    function updateInfos() {
        var infos = document.getElementById('infos');
        infos.textContent = "";
        for (var i = 0; i < myVideos.length; i++) {
            infos.textContent += myVideos[i].name + " duration: " + (myVideos[i].duration/60).toPrecision(3) + '分\n';
        }
    }
</script>
</body>
</html>

手机播放m3u8视频

<video class="vjs-tech" width="100%" height="100%"
    controls="controls" autoplay="autoplay"
    x-webkit-airplay="true" x5-video-player-fullscreen="true"
    preload="auto" playsinline="true" webkit-playsinline
    x5-video-player-typ="h5">
    <source type="application/x-mpegURL" src="http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8">
</video>

<iframe width="100%" height="100%" src="https://streamtape.com/e/LDjWpakZmpHRX9X" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" referrerpolicy="no-referrer"></iframe>

资源采集规则

列表接收参数

keyvalue说明
aclist / videolist视频列表
t类别ID
wd搜索关键字
h几小时内的数据
pg页码

TinyMCE配置基本使用

中文网站：http://tinymce.ax-z.cn/

入门案例

<script>
    tinymce.init({
        selector: '#mytextarea',
        mobile: {
            menubar: true
        },
        language:'zh_CN',//注意大小写
        language_url : 'tinymce/langs/zh_CN.js',
        // toolbar_mode: "wrap",
        statusbar: false, //编辑器底部隐藏状态栏
        toolbar: "undo redo emoticons| styleselect alignleft aligncenter alignright bold italic code | image media | preview forecolor ",
        plugins: "emoticons image imagetools media code preview autolink",
        preview_styles: false,
        contextmenu: "bold copy autolink", //编辑器里面右键操作
        draggable_modal: true,
        menubar:false,
        // 工具栏1
        // menu: {
        //     file: {title: '文件', items: 'newdocument'},
        //     edit: {title: '编辑', items: 'undo redo | cut copy paste pastetext | selectall'},
        //     insert: {title: '插入', items: 'link media | template hr'},
        //     view: {title: '查看', items: 'visualaid'},
        //     format: {title: '格式', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        //     table: {title: '表格', items: 'inserttable tableprops deletetable | cell row column'},
        //     tools: {title: '工具', items: 'spellchecker code'}
        // }
    });
</script>

配置工具项

所属插件为核心的项为基本包里自带的功能，直接写在toolbar里就可以， 属于插件的项需要引入插件(plugins: '插件名')然后在toolbar中配置。

字段说明字段字段说明
menubar是否显示顶部菜单栏 true / falsebold加粗
newdocument创建新文档italic斜体
alignnone清除alignjustify两端对齐
formatselect段落选择下拉框(段落、标题)alignleft居左
fontselect字体选择下拉框aligncenter居中
fontsizeselect字号选择下拉框alignright居右
outdent减少缩进strikethrough删除线
indent增加缩进underline下划线
undo撤消
redo恢复cut剪切
removeformat清除格式copy复制
subscript下标paste粘贴
superscript上标text_color
visualaid网格线
insert插入的集合按钮quickimage快捷插入图片
styleselect格式选择下拉框(缩进、行高)

一下字段需要插件，可前往官网下载

字段插件说明
hrhr水平线
bullistlists无序列表
numlistlists有序列表
linklink添加和修改链接
unlinklink去除链接格式
openlinklink打开选中链接
imageimage添加和修改图片
charmapcharmap特殊符号
pastetextpaste粘贴纯文本
printprint打印
previewpreview预览
anchoranchor作者
pagebreakpagebreak分页符
spellcheckerspellchecker拼写检查
searchreplacesearchreplace搜索
visualblocksvisualblocks隐藏块级区域开关
visualcharsvisualchars隐藏字符串开关.
codecode代码
helphelp帮助
fullscreenfullscreen全屏
insertdatetimeinsertdatetime插入时间
mediamedia插入/编辑媒体文件
nonbreakingnonbreaking不间断空格
savesave保存(ajax)
cancelsave取消保存
tabletable插入/编辑表格
tabledeletetable删除表格
tablecellpropstable单元格属性
tablemergecellstable合并单元格
tablesplitcellstable拆分单元格
tableinsertrowbeforetable在当前行之前插入一个新行
tableinsertrowaftertable在当前行之后插入一个新行
tabledeleterowtable删除当前行
tablerowpropstable行属性
tablecutrowtable剪切选定行
tablecopyrowtable复制选定行
tablepasterowbeforetable在当前行之前粘贴行
tablepasterowaftertable在当前行之后粘贴行
tableinsertcolbeforetable在当前列之前插入一个列
tableinsertcolaftertable在当前列之后插入一个列.
tabledeletecoltable删除当前列
rotateleftimagetools逆时针旋转当前图像
rotaterightimagetools顺时针旋转当前图像
flipvimagetools垂直翻转当前图像
fliphimagetools水平翻转当前图像
editimageimagetools打开图像编辑对话框
imageoptionsimagetools打开图像配置对话框
fullpagefullpage完整页面的文档属性
ltrdirectionality设置编写方向从左到右
rtldirectionality设置编写方向从右到左
emoticonsemoticons表情
templatetemplate插入模板
forecolortextcolor文本颜色
backcolortextcolor背景颜色
restoredraftrestoredraft恢复到最新的自动保存草稿
insertfilemoxiemanager引入文件
a11ychecka11ychecker检查访问性
toctoc插入目录
quickimageinlite插入本地图像
quicktableinlite插入2X2的表格
quicklinkinlite插入连接

图片跨域

<meta name="referrer" content="no-referrer" />

网站优化配置

《Laravel 9 中文文档》 | Laravel China 社区

为了保护页面内容，或者是诱导用户注册，网站经常需要实现禁止用户复制剪切页面内容的操作，或者是登录之后才允许进行复制剪切操作的功能。我们分别从 JavaScript、CSS、HTML 标签属性三个方面来看看如何实现网页禁止复制的效果。

通过 JavaScript 实现

禁止网页复制，最直接的思路是将页面的复制事件跟剪切事件进行重写。除此之外，我们还能通过禁用鼠标右键菜单事件、禁止用户选中内容的方式去实现。相关代码如下所示：

// 禁止右键菜单
document.oncontextmenu = function(){ return false; };
// 禁止文字选择
document.onselectstart = function(){ return false; };
// 禁止复制
document.oncopy = function(){ return false; };
// 禁止剪切
document.oncut = function(){ return false; };
复制代码

通过 HTML 标签属性实现

上述提到的解决思路，除了通过 JS 代码实现外，也可以通过设置标签属性的方式直接禁用页面复制剪切操作，如下所示：

<body oncopy="return false" oncut="return false;" onselectstart="return false" oncontextmenu="return false">
<!--……-->
</body>
复制代码

该方法本质上与 JS 实现方式相同。当需要恢复页面的复制功能时（比如判断用户已经注册登录后），需要通过 JS 代码将页面复制、剪切及内容选中功能进行恢复，代码如下所示：

document.body.oncopy = null;
document.body.oncut = null;
document.body.onselectstart = null;
document.body.oncontextmenu = null;
复制代码

通过 CSS 实现

我们也可以通过 CSS 样式，禁止页面内容被选中，从而达到限制复制操作的目的。相关样式代码如下：

body {
  -moz-user-select:none; /* Firefox私有属性 */
  -webkit-user-select:none; /* WebKit内核私有属性 */
  -ms-user-select:none; /* IE私有属性(IE10及以后) */
  -khtml-user-select:none; /* KHTML内核私有属性 */
  -o-user-select:none; /* Opera私有属性 */
  user-select:none; /* CSS3属性 */
}
复制代码

而恢复页面内容选中功能，则需要通过 JS 代码标签样式进行修改实现，代码如下：

document.body.style.webkitUserSelect = 'auto'; // Firefox
document.body.style.userSelect = 'auto'; // Chrome
//......
橙子工作室
Copyright © 2024 OrangBus