当前位置:清晨 » 网站建设 » html网页中播放本地视频代码

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

发布日期:2019年2月12日 09:02:56 点击量: 468

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

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

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

原生方式:

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

 

 


关键词:

本文网址:https://www.menglei.info/2769/,转载请以链接形式注明出处,谢谢合作!

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

发表评论

电子邮件地址不会被公开。 必填项已用*标注