html网页中播放本地视频代码

起因,网站上要放一段视频,从第三方转载会有广告.

只能考虑在自己服务器上保存视频进行播放.

原生方式:

HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

代码来源:http://www.runoob.com/html/html-videos.html

第三方播放器方式:

使用ckplayer播放器

代码

<script type="text/javascript" src="http://www.ckplayer.com/Public/ckplayer/x1/ckplayer.js"></script>
<div class="videosamplex">
    <video id="videoplayer" src="http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4"></video>
</div>
<script type="text/javascript">
    var videoObject = {
	container: '.videosamplex',//“#”代表容器的ID，“.”或“”代表容器的class
	variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
	poster:'pic/wdm.jpg',
	mobileCkControls:true,//是否在移动端（包括ios）环境中显示控制栏
	mobileAutoFull:false,//在移动端播放后是否按系统设置的全屏播放
	h5container:'#videoplayer',//h5环境中使用自定义容器
	video:'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4'//视频地址
    };
    var player=new ckplayer(videoObject);
</script>

本代码可以在多个平台上显示的风格一致，包括ios，安卓，PC端
代码中的js文件可以本地化,方便测试

来源:http://www.ckplayer.com/sampleX/ios.html