html video api控件总结

最新推荐文章于 2024-06-12 15:33:32 发布

weixin_30932215

最新推荐文章于 2024-06-12 15:33:32 发布

阅读量137

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/longfeiPHP/p/5462584.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>

<body>
<video id="video" width="500" controls="controls" preload="auto" autoplay style="background:#333" webkit-playsinline x-webkit-airplay>
    <source src='ceshi.mp4' type="video/mp4" -webkit-playsinline="true"></source>';
    您的浏览器不支持video标签
</video>

<hr />
<input type="button" onclick="pose()" value="暂停" />
<input type="button" onclick="play()" value="播放" />
<input type="button" onclick="restart()" value="重置" />
<input type="button" onclick="counttime()" value="获取总时长" />
<input type="button" onclick="currtime()" value="当前时间" />
<input type="button" onclick="fword(10)" value="前进10秒" />
<input type="button" onclick="rewind(10)" value="后退10秒" />
<input type="button" onclick="selecttimeplay(50)" value="在50秒处播放" />
<input type="button" onclick="fast(0.1)" value="快放0.1" />
<input type="button" onclick="slow(0.1)" value="慢放0.1" />
<input type="button" onclick="volumeadd(0.1)" value="音量+0.1" />
<input type="button" onclick="volumeless(0.1)" value="音量-0.1" />
<input type="button" onclick="muted()" value="静音" />
<input type="button" onclick="removemuted()" value="取消静音" />
<script>
    //获取video元素
    var video = document.getElementById("video");
    
    //暂停方法
    function pose(){
        video.pause();
    }
    //播放方法
    function play(){
        video.play();
    }
    //将全部属性回复默认值，视频恢复重新开始状态
    function restart(){
        video.load();
    }
    //获取视频总时长
    function counttime(){
        alert(parseInt(video.duration)+'s');
    }
    function currtime(){
        alert(parseInt(video.currentTime)+'s');    
    }
    //前进10s
    function fast(time){
        video.currentTime += time;
    }
    //后退10s
    function fword(time){
        video.currentTime += time;
    }
    //快退
    function rewind(time){
        video.currentTime -= time;
    }
    //在50秒处播放
    function selecttimeplay(){
        video.currentTime = 50;
    }
    //快放0.1
    function fast(num){
        video.playbackRate += num;    
    }
    //慢放0.1 不能点十次，也就是慢放到1时会暂停
    function slow(num){
        video.playbackRate -= num;    
    }
    //音量加10%
    function volumeadd(num){
        video.volume += num;
    }
    //音量减10%
    function volumeless(){
        video.volume -= num;
    }
    //静音
    function muted(){
        video.muted = true;
    }
    //取消静音
    function removemuted(){
        video.muted = false;
    }
</script>
</body>
</html>

效果如下

视频收费处理，在做视频收费业务是，如果直接使用video api则会有js缓存的问题，解决该问题的办法是，用iframe嵌套视频代码把视频相关参数传递到该iframe里面，并且用js在iframe页面里面进行api的限定。

转载于:https://www.cnblogs.com/longfeiPHP/p/5462584.html

weixin_30932215

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html video api控件总结

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><...
复制链接

扫一扫