返回
前端
分类

在Safari上实现了视频播放自动全屏、暂停退出全屏等功能,代码如下

日期: 2019-11-21 03:37 浏览次数 : 169

HTML5播放暂停音乐,html5播放暂停

查看效果:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery播放音乐 - 何问起</title><base target=_blank />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
<link rel="stylesheet" href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
   <div class="playHovertree btn btn-primary">播放</div>
<div class="pauseHovertree btn btn-primary">暂停</div>
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script>

<script>
    $(document).ready(function() {
        var audioElementHovertree = document.createElement('audio');
        audioElementHovertree.setAttribute('src', 'http://cms.hovertree.com/hovertreesound/hovertreesnow.mp3');
        audioElementHovertree.setAttribute('autoplay', 'autoplay'); //打开自动播放
        //audioElement.load()

        $.get();

        audioElementHovertree.addEventListener("load", function() {
            audioElementHovertree.play();
        }, true);

        $('.playHover'+'tree').click(function() {
            audioElementHovertree.play();
        });

        $('.pauseH'+'overtree').click(function() {
            audioElementHovertree.pause();
        });
    });</script>
    <br /><br />
    By <a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/code/">代码</a>
</body>
</html>

更多特效:

必赢备用网址 , 查看效果: 代码如下: ! DOCTYPE html html head meta http-equiv ="Content-Type" co...

css 播放暂停按钮实现,css播放暂停按钮

效果图

 

必赢备用网址 1

 

 

 

html代码

 //播放按钮
  <div id="playBtn" class="circle">                .circle {
    border: solid 1px #23527C;
    border-radius: 50px;
    height: 50px;
    position: absolute;
    width: 50px;
   }

   .circle:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
   }


   .circle_inner_play {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent #23527C;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -7px;
   }

   .circle_inner_pause {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -10px;
    color: #23527C;
   }

   .circle_inner_reset {
    width: 18px;
    height: 18px;
    background-color: #23527C;
    margin: -9px 0 0 -9px;
    position: absolute;
    top: 50%;
    left: 50%;
   }

  

播放暂停按钮实现,css播放暂停按钮 效果图 html代码 //播放按钮div id="playBtn" class="circle"> .circle {border: solid 1px #23527C;border-radius: 50px;heig...

html5视频播放自动全屏,暂停退出全屏等功能

在参考了html5 video fullScreen全屏实现方式及司徒正美的书《javascript框架设计》287页相关代码后,在Safari上实现了视频播放自动全屏、暂停退出全屏等功能。代码是否兼容其他浏览器,未测。

var videoF = (function() {
                var tmpV = {};
                var video_playing;
                /**
                 * @description 切换内容列时暂停当前播放的视频
                 */
                function pausedVBeforeChangeLi() {
                    if (video_playing && !video_playing.ended && !video_playing.paused) {
                        video_playing.pause();
                    }
                };
                tmpV.pausedVBeforeChangeLi= pausedVBeforeChangeLi;
                /**
                 * @description 播放全屏 很诡异,这个方法居然不可用
                 * @param {Object} element
                 */
                function launchFullScreen(element) {
                    if (element.requestFullScreen) {
                        element.requestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    }
                };
                /**
                 * @description 取消全屏 这个方法也是不可用
                 * @param {Object} elem
                 */
                function cancelFullScrren(elem) {
                    elem = elem || document;
                    if (elem.cancelFullScrren) {
                        elem.cancelFullScrren();
                    } else if (elem.mozCancelFullScreen) {
                        elem.mozCancelFullScreen();
                    } else if (elem.webkitCancelFullScreen) {
                        console.log("webkitCancelFullScreen");
                        elem.webkitCancelFullScreen();
                    }
                };
                /**
                 * @return 返回支持的全屏函数 从网上找到了这段代码,具体网址忘记了,返回支持的全屏方法,在Safari上可用
                 * @param {Object} elem
                 */
                function fullscreen(elem) {
                    var prefix = 'webkit';
                    if (elem[prefix + 'EnterFullScreen']) {
                        return prefix + 'EnterFullScreen';
                    } else if (elem[prefix + 'RequestFullScreen']) {
                        return prefix + 'RequestFullScreen';
                    };
                    return false;
                };
                /**
                 * @description video相关事件的绑定
                 * @param {Object} v
                 */
                function videoEvent(v) {
                    var video = v,
                        doc = document;
                    video.addEventListener('play', function() {
                        //每次只能播放一个视频对象
                        if (video_playing && video_playing !== this) {
                            console.log('multi')
                            pausedVBeforeChangeLi();
                        }
                        video_playing = this;
                        console.log('play');
                        var fullscreenvideo = fullscreen(video);
                        video[fullscreenvideo]();
                    });
                    video.addEventListener('click', function() {
                        //点击时如果在播放,自动全屏;否则全屏并播放
                        console.log('click')
                        if (this.paused) {
                            console.log('paused');
                            this.play();
                        } else {
                            var fullscreenvideo = fullscreen(video);
                            video[fullscreenvideo]();
                        }
                    })
                    video.addEventListener('pause', function(e) {
                        this.webkitExitFullScreen();
                    });
                    video.addEventListener("webkitfullscreenchange", function(e) {
                        //TODO 未侦听到该事件
                        console.log(3);
                        if (!doc.webkitIsFullScreen) { //退出全屏暂停视频
                            video.pause();
                        };
                    }, false);
                    video.addEventListener("fullscreenchange ", function(e) {
                        console.log(31);
                        if (!doc.webkitIsFullScreen) { //退出全屏暂停视频
                            video.pause();
                        };
                    }, false);
                    video.addEventListener('ended', function() {
                        //播放完毕,退出全屏
                        console.log(4)
                        this.webkitExitFullScreen();
                    }, false);
                };
                tmpV.videoEvent = videoEvent;
                return tmpV;
            }());