1. 먼저, 사격 영상의 원본 사진을 보여주세요. 사실이 직접 말해줍니다.
2.코드 표시
1>html 코드 표시
<div class=barrage> <video id=myvideo 자동 재생 루프 폭=100% height=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -내용은 여기에 표시됩니다--> </div> </div> <!--보내기 대화 상자--> <div class=send> <input type=text class=s_text placeholder=Enter를 사용하여 빠르게 포격을 보냅니다/> <input type=button class=s_btn value=Send/> <!--포격 닫기 기능--> <span class=barrage_close>포격 닫기</span> < !-- 음소거 기능--> <span id=muted>음소거 켜기</span> </div> </div>
2>CSS 코드 표시
*{ 패딩: 0; 여백: 0;}입력{ 개요: 없음;}.barrage { 위치: 상대; 너비: 250px;}#myvideo{ 위치: 절대: 100%; :300px; */ 상단: -50px; 왼쪽: 0; z-index: -1;}.barrage .screen { 위치: 절대: 0px; 오른쪽: 0px; 너비: 100%; 높이: 300px;}.barrage .screen .content { 위치: 상대; 너비: 250px; 배경: #000; 불투명도 =100); *//***ie8 이하 브라우저의 경우****/ background-color: z-index: 1;}.barrage .screen .content div { 위치: 절대; 글꼴 크기: 20px; 공백: nowrap; z-index: 40;}.barrage .send { 위치: 절대; 하단: 100%; 높이: 55px; 1; /*배경: #000;*/ 배경: rgba(0,0,0,0.5); text-align: center; /*display: none;*/}.barrage:hover .send{ display: block; }.barrage .send .s_text { 너비: 60%; 높이: 35px; 글꼴 크기: 16px; 글꼴 계열: Microsoft Yahei; 테두리 반경: 20px;}.barrage .s_btn { 너비: 105px; 줄 높이: 35px; 테두리 색상: -반경: 10px; 0.8;}.barrage_close,#muted { 너비: 80px; 선 높이: 30px; 텍스트 정렬: #22B14C; 커서: : 0.8;}#muted{ background:yellow;}.barrage_close1{ 색상: #fff; 배경: #fff;}/* CSS 애니메이션*/.content div{ animation:Text 15s 무한 일반;}@keyframes Text{ 0%{ 왼쪽:100% } 20%{ 왼쪽:75%; %{ 왼쪽:0%; } 100%{ 왼쪽:-30% }}3>js 코드 표시
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//연막 내용을 배열에 넣어 저장합니다. it var arr=[];var h=arr.push();// 전송을 모니터링하고 문서를 보내려면 Enter 키를 누르세요.οnkeydοwn=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111) $(.send .s_btn).click() } };//댓글 제출 $(.send .s_btn ).click(function () { var text = $(.s_text).val(); if (text == ) { Alert('콘텐츠가 비어 있습니다. 보내기 전에 설명을 작성하세요.'); return false } var _lable = $(<div style='right:20px;top:0px;opacity:1;color: + getColor() + ;'class='content_text'> + 텍스트 + </div>) $(.content).append(_lable.show()); $(.s_text).val();});//공격 기술 초기화 function init_barrage() { var _top = 0 $(.content div).show().each(function () { var _left =$ ( .barrage).width();//왼쪽 위치 지정 값인 브라우저의 최대 너비(브라우저의 높이이기도 함) console.log(_left); =$(.barrage).height();//비디오 창의 최대 높이 console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; this ).css({ left: _left, top: _top, color: getColor() }); // 정기적으로 텍스트 팝업 // var time = 10000; // if ($(this).index() % 2 == 0) { // time = 15000; // } // $(this).animate({ left: - + _left + px }, 시간, 함수 () { // $(this).remove(); // }); });}//임의의 색상 가져오기 function getColor() { return '#' + (function (h) { return new Array(7 - h.length).join(0) + h }) ((Math.random() * 0x1000000 << 0).toString(16))}var video=document.getElementById(myvideo);var mute=document.getElementById( muted);console.log(muted);//비디오 재생 속도 설정//video.playbackRate = 0.5;//비디오 음소거됨 video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText=''; // console.log(1111) }else{ video.muted = true mute.innerText='' mute.innerText = '음소거 끄기'; console.log(2222) }}3. 코드 효과 시연
<a 스타일="마진: 0px; 패딩: 0px; 윤곽선: 없음; 줄 높이: 25.2px; 글꼴 크기: 14px; 너비: 660px; 오버플로: 숨김; 지우기: 둘 다; 글꼴 계열: 타호마, 굴림, 마이크로소프트 야헤이;"><div class=barrage> <video id=myvideo 자동 재생 루프 폭=100% height=300px> <source src=video/1.mp4> </video></div><style> .barrage { 위치: 상대 너비; : 100%; 높이:250px;}#myvideo{ 위치: 절대; /* 너비: 100% 높이:300px; -50px; 왼쪽: 0; z-색인: -1;}</style>요약위 내용은 에디터가 소개한 HTML5의 동영상 연발 기능입니다. 문의사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!
이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!