网站使用视频 video
最近公司要求首页放四个介绍视频，轮播图形式播放。初步决定用html5中video。百度查询后得知video有浏览器兼容问题。实践后发现以下方式：
方法一：
video网页视频播放
1.视频格式MP4 视频编码格式H264，主流浏览器都可播放（ie8以上）
2.mac下safari视频加载有问题。经调查发现safari实现视频播放需设置respons header中的content-range 实现断点续传。
以上准备完毕则视频可播放。
在网上查到各大浏览器支持视频格式：
但只要实现断点续传火狐和opera都可支持MP4格式。其他格式未测试。
以上为pc端实验。
代码如下：
<video id=\’video4\’ src=”/static/video/v1.mp4″ width=”888px” height=”500px” autoplay=”” poster=”/static/images/p56-v4.png” controls=”controls”> 您的浏览器不支持视频播放</video>
禁止下载视频：单击右键returnfalse：
<video id=\’video1\’ src=”/static/video/v4.mp4″ width=”888px” height=”500px” oncontextmenu=”return false;” poster=”/static/images/p56-v1.png” controls=”controls”>您的浏览器不支持视频播放 </video>
方法二：
flash视频播放
将视频传至优酷，并在html中嵌入一下代码（替换上传视频地址）：
以下为youku视频的源代码：（copy自优酷视频）
<object type=”application/x-shockwave-flash” data=”//static.youku.com/v20170111.0/v/swf/loader.swf” width=”100%” height=”100%” id=”movie_player”>
<param name=”allowFullScreen” value=”true”>
<param name=”allowscriptaccess” value=”always”
><param name=”allowFullScreenInteractive” value=”true”>
<param name=”flashvars” value=”skincolor1=ffffff&skincolor2=ffffff&VideoIDS=XMjA5NTIyNjY0OA==&ShowId=0&category=102&Cp=0&unCookie=0&frame=undefined&uepflag=0&Tid=0&isAutoPlay=true&playmode=1&show_ce=1&winType=interior&Fid=0&Pt=0&Ob=0&plchid=&embedid=AjUyMzgwNjY2MgJ2LnlvdWt1LmNvbQIvdl9zaG93L2lkX1hNakE1TlRJeU5qWTBPQT09Lmh0bWw=&ysuid=1476695865894pRp&vext=bc%3D%26pid%3Dundefined%26unCookie%3Dundefined%26frame%3Dundefined%26type%3D1%26fob%3D0%26fpo%3D0%26svt%3D0%26cna%3DZZWHEKWDPk8CAcq9AWmRVmIo%26emb%3DAjUyMzgwNjY2MgJ2LnlvdWt1LmNvbQIvdl9zaG93L2lkX1hNakE1TlRJeU5qWTBPQT09Lmh0bWw%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&cna=ZZWHEKWDPk8CAcq9AWmRVmIo&pageStartTime=1484101689525″>
<param name=”movie” value=”//static.youku.com/v20170111.0/v/swf/loader.swf”>
<div class=”player_html5″>
<div class=”picture” style=”height:100%”>
<div style=”line-height:460px;”>
<span style=”font-size:18px”>您还没有安装flash播放器,请点击<a href=”//www.adobe.com/go/getflash” target=”_blank”>这里</a>安装</span></div></div>
</div>
</object>
未调查：
jplayer
html5media.min.js（据说兼容IE8）
以上未完待续。。。
版权声明：本文为blueblueHand原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。