霍者博客

HTML5视频播放代码部分功能代码的说明

今天遇到一个客户需要把首页本来是一张图片的位置换成一个视频,通常默认用flash就可以了,但是为了顺应潮流,我就试着用用HTML5了,但是再用的过程中还是发现了一些问题,下面就简单的讲解一下,完整的代码如下,下面就讲解一下其中几个控制点代码的意思。

<video width="480" height="400" controls="controls" autoplay="autoplay" controlslist="nodownload" oncontextmenu="return false;">
    <source src="http://cloud.video.taobao.com//play/u/188631823/p/2/e/6/t/1/38087958.mp4" type="video/mp4"/>
</video>

controls="controls":向用户显示控件,比如播放按钮、播放进度条、音量控制等。

autoplay="autoplay":视频自动播放

controlslist="nodownload":控件上不显示下载按钮

oncontextmenu="return false;":视频画面上鼠标右键不显示视频下载等。

效果如下:

如果在应用场景中有需要,有视频的时候出现代码,没有视频的时候,则隐藏,以下就是ASPCMS程序所用的IF判断。

{if:"[news:C_video]"<>""}
<video width="480" height="400" controls="controls" autoplay="autoplay" controlslist="nodownload" oncontextmenu="return false;">
    <source src="[news:C_video]" type="video/mp4"/>
</video>
{end if}

如果放在移动端模版里,那么还要考虑宽度自适应和高度问题,所以用在移动端可以用以下代码:

{if:"[news:C_video]"<>""}
<video width="100%" height="250" controls="controls" autoplay="autoplay" controlslist="nodownload" oncontextmenu="return false;">
    <source src="[news:C_video]" type="video/mp4"/>
</video>
{end if}


原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/770.html,标题:HTML5视频播放代码部分功能代码的说明

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。