技巧与情怀 作品

必须做选择

建与不建

  • 之前自己的作品一直依托公共平台发布，比如CCTV.节目官网、bilibili、新片场等。用起来都得心应手！也不用考虑什么流量、网站用带宽等。
  • 近期因众所周知的原因，活少了又还不得不宅家！有时间整理过去所拍资料与素材，决定搭建属于自己的拍影视博客平台，拥有一个属于自己的学习和生活空间，于是便有了这样一个网站。

用什么工具建

  • 开始在Typecho和WordPress之间做出选择比较困难！TC偏简洁风，WP偏繁琐。最后喜欢比较高端页面的我还是选择了TC，专注于高质量的博客内容才是初心~

视频作品放在哪

很多人不建议把视频直接传到网站上，为什么呢？因为

  • 首先我们要考虑视频的储存问题，一个视频小到十几M到大几百M
  • 其次考虑视频播放流畅性，视频制作的挺好，播放的时候老卡顿也不行
  • 第三考虑视频的播放站用流量，网站用带宽
  • 当然最根本考虑是钱的问题，如果￥不是问题，则上面三条也就不是问题了

那怎么办呢？建议把视频上传到第三方平台，如腾讯视频、爱奇艺，土豆，优库这些，还有其他收费的第三方（阿里云、腾讯云等），这些收费的第三方的放到网站不会出现广告；然后通过代码或者链接的方式引入到自己的网站！

选择VideoJs视频播放“首秀”

HTML5 video 播放视频浏览器的兼容性

HTML5 video 播放视频支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。

格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No
NO：代表不支持这款浏览器。
X.0+：表示支持这款及版本更高的浏览器。

选择VideoJS视频播放器

VideoJS是市面上最流行的免费、开源HTML5视频播放器。官网文档。查目前最新稳定版本是v7.20.3。

参考使用代码（simple-embed）

<head>
    <title>Video.js | HTML5 Video Player</title>
    <link href="http://vjs.zencdn.net/7.20.3/video-js.min.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/7.20.3/video.min.js"></script>

</head>
<body>
  <video id="example_video_1" class="video-js" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English">
    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English">
    <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>
</body>


实战

《名师带入门-21天工笔画研习课》 - 豆瓣时间X活字文化

  1. 1
  2. 2