yan blog
0%

发表于 更新于 本文字数： 2.3k 阅读时长 ≈ 2 分钟

如何引入videojs

引入videojs的css js, 给video元素加上video-js类，并加上data-setup属性， 这样就videojs就可以正常工作了

cdn

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>videojs</title>
  <!-- 引入css -->
  <link rel="stylesheet" href="https://vjs.zencdn.net/7.8.4/video-js.css">
</head>

<body>
  <video
    class="video-js"
    controls
    width="640"
    poster="poster.jpg"
    data-setup="{}">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support" target="_blank">supports HTML5 video</a></p>
  </video>
  <!-- 引入js -->
  <script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</body>

</html>

这个加过视频封面的样子

这是视频播放时的界面

npm

npm install --save-dev video.js

安装完成后，需要引入css和js

import 'video/dist/video-js.css'
import videojs from 'videojs'

更改主题

通过cdn

引入主题样式，并向video元素添加相应的主题类，例如 vjs-theme-city

<video id="player" class="video-js vjs-theme-city">
<!-- city -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/city/index.css">
<!-- fantasy -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css">
<!-- forest -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/forest/index.css">
<!-- sea -->
<link rel="stylesheet" href=" https://unpkg.com/@videojs/themes@1/dist/sea/index.css">

city theme

fantasy theme

forest theme

sea theme

通过npm

通过npm安装主题样式

npm install @videojs/themes

然后模块引入

// city
import '@videojs/themes/dist/city/index.css'
// fantasy
import '@videojs/themes/dist/fantasy/index.css'
// forest
import '@videojs/themes/dist/forest/index.css'
// sea
import '@videojs/themes/dist/sea/index.css'

然后在我们的player播放器的video元素添加类

<video id="player" class="video-js vjs-theme-city"></video>

发表于 更新于 本文字数： 896 阅读时长 ≈ 1 分钟

一、前情

为了可以上google，以前都是自己租vps搭ss，可是0202年确实太不稳定了，用不了几周就被ban了，还是去找些免费vpn吧，目前市面上里免费vpn最稳定的算老王vpn了，网速还是很不错的，可以满足日常使用，但是目前只有移动端，没有pc端，虽然可以通过移动端获取pc连线码，但是确实太麻烦了，而且在pc上的体验也原不如移动端
目前手里刚好有一个刚退休的android手机，没有坏，可以正常使用，那么如果用这部手机使用老王连上vpn，那么其他设备再通过这个手机上网不就可以上google了吗，嗯，确实可以，那就让手机做http代理服务器吧

二、搭建http代理

在网上查了下，想要用手机作为代理服务器大致有两种方式：

  • 通过termux在类linux环境使用python的proxy.py实现手机端代理（繁琐对个人技术要求高，且新版的proxy.py对移动端兼容不太好，不在使用这种方式）

  • 通过proxy server app（简单易用）

1.安装proxy server

在google play商店搜索 proxy server，即可安装

2.配置

打开app，选择添加一个proxy server

在配置页，随便起个名字，在添加个端口号，返回确认保存即可

查看信息，这里可以看到手机端的ip地址

点击start按钮即可启动代理服务，底部可以查看服务日志

三、连接服务

1.手动设置代理

这里的手动设置代理是指自己指定固定的代理地址及端口号，只能指定一个代理服务

这是window10是下手动代理设置，输入手机端的ip及端口号，即可连接

2.使用代理脚本

手动设置代理会有一些局限性，所有的流量都会走我们的代理服务器，有时候我们并不想这样，可能只是google等国外的流量才是我们想代理的，国内的也走代理的话，那就绕远路了，使用代理脚本是可以有选择性的，我们可以指定访问哪些站点走代理，或是走不同的代理，通常是一个pac文件

如果想找到pac文件，可以在github上搜索pac文件的相关内容

我们可以在手机端启动一个http静态服务器，放置pac文件，以便于可以通过url访问到pac文件

然后在其他设备设置脚本代理，输入pac的地址

发表于 更新于 本文字数： 0 阅读时长 ≈ 1 分钟