0

如何使用蝉知发布视频(兼容多个浏览器)

2017-03-05 22:05:00
CHU
原创
2810

本方案需使用七牛云的视频格式转换功能 (http://www.qiniu.com/products/dora)

使用videojs做兼容


1、创建七牛云账户,并将自己的视频上传到云存储内

2、开通数据处理服务,创建音视频处理任务,选择原视频以及生成视频的格式为 video-web

3、任务完成后下载视频上传到自己的网站www/data 目录下,如/www/data/video/demo.mp4

4、后台--设计--区块 创建区块,选择html源码类型区块

区块内容为:


<link href='http://vjs.zencdn.net/c/video-js.css' rel='stylesheet'>
<script src='http://vjs.zencdn.net/c/video.js'></script>
<script type='text/tpl' id='videojsTpl'>
<video id='videoPlayer#id#' class='video-js vjs-default-skin vjs-big-play-centered vjs-fluid'
    controls preload='auto' loop='loop'
    width='#width#'
    height='#height#'
    data-setup='{}'
    oncontextmenu='return false;'>
    <source src="#srcmp4#" type='video/mp4' />
</video>
</script>
<script>
var videojsIndex = 0;
$('embed').each(function(){
    var id = videojsIndex;
    var width  = $(this).attr('width')||'200px';
    var height = $(this).attr('height')||'200px';
    var src    = $(this).attr('src')||'###';
    var filename = src.substring(0, src.lastIndexOf('.'));
    var tpl = $('#videojsTpl').html();
    if(v.theme.template == 'mobile') width = '100%';
    tpl = tpl.replace('#id#', id).replace('#width#', width).replace('#height#', height);
    tpl = tpl.replace('#srcmp4#', filename + '.mp4').replace('#srcwebm#', filename + '.webm').replace('#srcogg#', filename + '.ogg')
    $(this).after(tpl).remove();
    id += 1;
});
</script>
5、后台--设计--界面--布局--文章详情页--底部通栏,选择刚才新建的区块添加


6、后台--内容--文章,编辑文章点击“视音频”按钮添加视频,视频地址写第三部上传的视频地址